ajax加载后，绑定点击代理不再起作用答案

【问题标题】：After ajax load, bind click proxy doesn't work anymoreajax加载后，绑定点击代理不再起作用
【发布时间】：2021-01-20 16:49:11
【问题描述】：

我正在创建一个包含一些可点击 div 的页面。单击时，有关特定 div 的文本会显示在页面的某处。这行得通。

现在我添加了一个 ajax 调用来重新加载页面，其中包含一组不同的 div，这些 div 具有相同的类，当单击时应该触发文本显示功能。新的 div 已加载，但单击时不会在任何地方加载文本。

以$(".toggle1").click(function () 开头的事件有效，但不是$(".block").bind('click', $.proxy(function(event)。有什么问题？

<script type="text/javascript">
$(function() {  
      // CALL TO ADD MORE DIVS
    $("#trace").bind('click', $.proxy(function(event) {
        var button2 = $('#combo').val();
        if(button2 == 'abc') {
            var trans = 'abc';
        }
        $.ajax({ // ajax call starts
            url: 'transactions.php', // JQuery loads transactions.php
            data: 'button2=' + $('#combo').val(), // Send value of the clicked button
            dataType: 'json', // Choosing a JSON datatype
            success: function(data) // Variable data constains the data we get from serverside
            {
                JSGraphIt.delCanvas('mainCanvas');
                $('.test').html('<h1>' + trans + '</h1>'); // Clear #content div
                $('#mainCanvas').html(''); // Clear #content div
                $('#mainCanvas').append(data);
                JSGraphIt.initPageObjects();
            }
        });
        return false; // keeps the page from not refreshing 

    }, this));
    
    // THIS CALL WORKS
    $(".toggle1").click(function () {
        $("#content").slideToggle("fast");

        var up = $("#image1").attr('src') == "img/arrow_up.png"

        $("#image1").attr(
            'src', 
            $("#image1").attr('src').replace(up ? '_up' : '_down', up ? '_down' : '_up')
        );
    }); // End Application Details Toggle
    
    // THIS CALL DOES NOT WORK
    $(".block").bind('click', $.proxy(function(event) {
        var input = $(event.target).attr('id');
        var lines = input.split('_');
        var button = lines[0];
        $.ajax({ 
            url: 'serverside.php', 
            data: 'button=' + button,
            dataType: 'json', 
            success: function(data)
            {
                $('#content').html('');
                $('#content').append(data);
            }
        });
        return false;
    }, this)); 
});
</script>

【问题讨论】：

标签： jquery ajax bind jquery-events

【解决方案1】：

因为dom被操纵了bla bla

委派点击总是在那里，例如。文档对象

$(document).on('click', ".block", function(){ $.proxy(function(event) { ...

【讨论】：

不确定我的语法哪里出了问题，但用它更新了问题帖子。它导致原始 div 也无法点击..
Nvm，遵循最佳答案。也感谢您对此发表评论。

【解决方案2】：

由于您的文档正在被 Ajax 修改，因此您需要更改上面的点击功能：

$(document).on('click', '#trace', $.proxy(function(event) {
/****Your Code ***/
});

或

$('#trace').live('click', $.proxy(function(event) {
/****Your Code ***/
});

【讨论】：

.live 已弃用，最好使用 .on