Question

我有一个按钮，它在表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><?
    }
?>

Answer 1

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

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

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

在jQuery＆lt; 1.7，之前使用的是这样的：

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

Answer 2

将代码包装在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'/>");
   });

Answer 3

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

例如：

在jQuery 1.7之前

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

jQuery 1.7及更高版本

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

附加按钮onclick不会触发Jquery

3 个答案: