附加按钮 onclick 不会触发 Jquery答案

【问题标题】：appended button onclick don't fire Jquery附加按钮 onclick 不会触发 Jquery
【发布时间】：2012-07-12 20:51:04
【问题描述】：

我有一个在表格 td 中附加 2 个文本字段和一个按钮的按钮，但问题是附加按钮的 onclick 功能不会触发。有人看到问题了吗？代码：

<script>
    $(document).ready(function(){
        $("#add").click(function() {
            $(".no_border").append("<br /><label>Co-author email:</label><input type='text' name='author_email'/><label>Co-author Level:</label><input type='text' name='author_level'/><input id='save' type='button'name='save' value='Add'/>");
    });
});
</script>
<?php
    while($row = mysql_fetch_assoc($co_authors)) {
        echo "<tr>
            <td>{$row['author_email']}</td>
            <td>{$row['coauthor_level']}</td>";
            ?><td><button class='remove' id='remove' name='remove' email="<?php echo $row['author_email'] ?>"
            paper="<?php echo $row['paper_id'] ?>">Remove</button></td>
            </tr><?
            ?><td colspan="3" class="no_border"><button class="add" name="add"></button>
            <label id="add" class="cursor_pointer"> Add more co-authors</label></td><?
    }
?>

【问题讨论】：

标签： php javascript jquery append appendto

【解决方案1】：

您将需要使用 jQuery .on() 功能来访问在 DOM 加载后创建的元素。

可以在此处的 jQuery 手册中找到更具体的信息： http://api.jquery.com/on/

$( document ).on( "click", "#add", function() {
    alert("aaaaaaaaaaa");
} );

在 jQuery

$( "#add" ).live( "click", function( e ) {} );

【讨论】：

【解决方案2】：

可能您必须使用.on 或.live()，它们使脚本识别在调用$(document).ready() 之后创建的元素。

例如：

在 jQuery 1.7 之前

$("#add").live("click", function() {
    ...

jQuery 1.7 及更高版本

$("#add").on("click", function() {
    ...

【讨论】：

【解决方案3】：

将您的代码包装在 jQuery 文档 ready 函数中：

$(function() {
   $("#add").click(function() {
      $(".no_border").append("<br /><label>Co-author email:</label><input type='text' name='author_email'/><label>Co-author Level:</label><input type='text' name='author_level'/><input id='save' type='button'name='save' value='Add'/>");
   });
});

更多详情见：http://api.jquery.com/ready/

您也可以使用.on 或.live（.on 是 1.7 中的首选方法）。

   $(document).on('click', '#add', function() {
      $(".no_border").append("<br /><label>Co-author email:</label><input type='text' name='author_email'/><label>Co-author Level:</label><input type='text' name='author_level'/><input id='save' type='button'name='save' value='Add'/>");
   });

   $("#add").live('click', function() {
      $(".no_border").append("<br /><label>Co-author email:</label><input type='text' name='author_email'/><label>Co-author Level:</label><input type='text' name='author_level'/><input id='save' type='button'name='save' value='Add'/>");
   });

【讨论】：

这已经完成了，我只是添加部分代码来解释。
要将.on() 用于在 dom 准备好后加载的元素，您的选择器必须在 dom 中找到已经存在的元素。在这种情况下，.on() 的正确用法是$(document).on('click','#add', function() { })。（使用.on() 的方式与使用.click( handler ) 相同）
@nbrooks：感谢您指出这一点，已更新 .on() 的示例。