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

Question

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

$(文档).on("更改","#type_of",function(){

而不是这个:

$('#type_of').on('改变', 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

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

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