从php追加数据后按钮单击事件不起作用答案

【问题标题】：button click event not working after append data from php从php追加数据后按钮单击事件不起作用
【发布时间】：2012-06-30 04:48:04
【问题描述】：

我正在使用 $.get() 将 html 从 php 加载到 div 到 div。按钮单击事件工作正常。然后再次将相同的东西再次添加到具有不同 id 的不同 div 中，但它不起作用。谁能帮助我。我的代码是这样的

<style>
    .loadWindow {
        width:333px;
        height: 202px;
        padding: 5px 5px 0 5px;
        font: 12px Arial, Helvetica, sans-serif;
        border:double;
    }

    #loadWindow {
        display:none;
    }

<div id="main-box">
<div class="loadWindow" id="loadWindow"></div><button id="make">make</button>

我的 javascript 代码如下

$(function(){
    $('#make').click(function(){
        var id = $('.loadWindow').length;
        var aw = $('#loadWindow').clone().attr("id", "window"+id);

        //load data from php
        $.get("mydata.php", function(data) {
            aw.html(data);  
            $('#main-box').append(aw);
            aw.show();
        }, 'json');
    });
});

我的 mydata.php 代码如下

echo '<div><button id="closeBtn">Close</button></div><script>$("#closeBtn").click(function(){alert("Close button Clicked!");});</script>';

我希望每个窗口分别（单独）单击事件并显示警报。在此代码中，单击事件无法根据窗口工作。我能做什么？

【问题讨论】：

标签： php jquery html events click

【解决方案1】：

工作演示 http://jsfiddle.net/QYEWs/13/

请使用.on API 将一个或多个事件的事件处理函数附加到所选元素。

API：http://api.jquery.com/on/

请注意：您的附加将使 DOM 无效，因为您的 id 将始终相同，使其成为一个类

在 DOM 中动态添加的 html 上附加点击事件

这应该会有所帮助，:)

喜欢这个

附加单击事件以关闭按钮，如下所示：

$("#main-box").on("click",".closeBtn", function() {
    alert("Close button Clicked!");
});


$(function(){
    $('#make').on('click', function(){
        var id = $('.loadWindow').length;
        var aw = $('#loadWindow').clone().attr("id", "window"+id);

        //load data from php
        $.get("mydata.php", function(data) {
            aw.html(data);  
            $('#main-box').append(aw);
            aw.show();
        }, 'json');
    });
});

【讨论】：

感谢您的建议，但我正在动态加载 html，并且会有更多按钮并使用按钮进行不同的操作。主要是如何知道我要附加数据的 div，然后只有我可以在我的点击事件中使用“.on”来制作代码。我检查了代码为不同的加载窗口（我的意思是 window1、window2 等）创建了不同的 id。所以我正在加载带有脚本的html，这些脚本告诉单击指定按钮时要做什么。我正在制作类似类的东西，它有自己的功能、输入、按钮和外观。你有什么想法吗？

【解决方案2】：

$(function(){
    $('#make').click(function(){
        var id = $('.loadWindow').length;
        var aw = $('#loadWindow').clone(true).attr("id", "window"+id);
        //load data from php
        $.get("mydata.php", function(data) {
            aw.html(data);  
            $('#main-box').append(aw);
            aw.show();
        }, 'json');
    });
});

【讨论】：