触发器不会'不处理通过ajax加载的内容

Triggers doesn't work on content loaded via ajax

本文关键字：加载 ajax 处理 触发器      更新时间：2024-01-14

我有以下问题。我被迫重写以下所有函数来创建这个：

$(document).on("change","#type_of",function(){

而不是这个：

$('#type_of').on('change', function () {

我这样做是因为我正在操作DOM，并且在通过ajax加载内容后，所有函数都停止了操作。现在他们工作了一半，因为触发器不能完成他们的工作。以下所有代码都添加到页面index.php中。在这个页面中，我有div #content，我正在通过ajax重新加载它的内容。以下所有函数都只与该div相关。我的问题是如何为这些函数创建合适的触发器？

还有一个问题：在我的例子$(document).ready(function() {中，这是正确的语法吗？

$(document).ready(function() {  
    // ALSO SOME CODE HERE (variables and etc.)
    $(document).on("change","#type_of",function(){
        // FUNCTION CODE
    })

    $(document).on("change","#order_form",function(){
        // FUNCTION CODE
    })
    $( '#type_of, #orer_form' ).trigger( 'change' );
})

$(document).on("change","input[name=window-type]",function(){
    // FUNCTION CODE
}

$(document).on("change","#shutter_type",function(){
    // FUNCTION CODE
})
$( '#shutter_type, #input[name=window-type]' ).trigger( 'change' );

这也是我用来重新加载div #content 内容的一个ajax调用

function displayPhoto(photoid){
    $.ajax({
        url: "includes/displayphoto.php?photo_id="+photoid
    }).done(function(data) {    
        if (data == false)
        {
            alert ("ERROR");
        }
        else
        {
            $('#content').html(data);
        }
    });
}
$(document).on("click",".photo-id",function(){
    var photoid = $(this).data("photoid");
    displayPhoto(photoid);
});

您正在尝试在元素上.trigger()事件，这些元素没有任何直接的事件处理程序。由于您使用事件委派，因此必须.trigger()元素本身上的事件，在本例中，是id为#type_of、#order_form的元素以及您在文档节点上处理的所有其他元素。

$( '#type_of, #orer_form' ).trigger( 'change' );

试试这个主意，我希望它能对你有所帮助。

$(document).on("change","#select1",function(){
   //ajax request here that can pass to the params
    $("#test").trigger('click',[$(this).val()]);
});
$(document).on("click","#test",function( event, param1 ) {
   //ajax request here
  $("#result").html(param1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="test" style="display:none;">trigger</a>
<select id="select1">
<option>1</option>
<option>2</option>  
</select>
<div id="result">
  
</div>

这是因为新元素与任何事件都不相关。因为它们刚刚被装载。

快速解决方法是在加载内容后立即触发document.ready。

    else
    {
        $('#content').html(data);
        $(document).trigger('ready');
    }

一个更好的解决方案是，创建一个函数，比如说"绑定"

function bind(){
//All on... must go here.
$(document).off("change","input[name=window-type]");
$(document).on("change","input[name=window-type]",function(){
    // FUNCTION CODE
}
//and on every time you load new data call it:
    else
    {
        $('#content').html(data);
        bind();
    }

感谢大家的关注。

在你的帮助下，我终于找到了解决办法！

经过@peterpeterson和@jAndy的建议，我想出了一个好主意。我将$(document).ready(function() {替换为function readydoc ()，并在html(data)之后调用它。

function displayPhoto(photoid){
    $.ajax({
        url: "includes/displayphoto.php?photo_id="+photoid
    }).done(function(data) {    
        if (data == false)
        {
            alert ("ERROR.");
        }
        else
        {
            $('#content').html(data);
            readydoc();
        }
    });
}

然后我被置于function readydoc () 关闭标签前的触发功能

function readydoc ()  
    // ALSO SOME CODE HERE (variables and etc.)
    $(document).on("change","#type_of",function(){
        // FUNCTION CODE
    })

    $(document).on("change","#order_form",function(){
        // FUNCTION CODE
    })
    $( '#type_of, #orer_form, #shutter_type, input[name=window-type]' ).trigger( 'change' );
}

$(document).on("change","input[name=window-type]",function(){
    // FUNCTION CODE
}

$(document).on("change","#shutter_type",function(){
    // FUNCTION CODE
})

它的工作非常完美。非常感谢。

相关文章：