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的元素以及所有其他 Elements 您在文档节点上处理的事件。

$( '#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 ()

的关闭标记之前设置了触发器功能

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

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

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

4 个答案: