Question

我正在创建一个包含几个可点击div的页面。单击时，页面上某处显示有关特定div的文本。这很有效。

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

以$（“。toggle1”）开头的事件。单击（function（）work，但不是$（“。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>

Answer 1

当dom被操纵bla bla

委托点击那些总是在那里，例如。文件对象

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

Answer 2

由于您的文档正在被Ajax修改，因此您需要使用以下命令更改上述点击功能：

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

OR

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

在ajax加载后，绑定点击代理不再工作

2 个答案: