触发器不适用于通过ajax加载的内容

Question

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

$(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);
});

Answer 1

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

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

Answer 2

尝试这个想法，我希望这会对你有所帮助。

 $(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> 

Answer 3

发生这种情况是因为新元素与任何事件无关。 因为他们刚被装载。

快速解决方法是在加载内容后在else上触发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();
    }

Answer 4

谢谢大家的关注。

最后在你的帮助下我找到了解决方案！

根据@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 () close标签之前放了触发器函数

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
})

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