Question

我正在尝试制作一个警告框，显示触发事件的控件的名称。在这种情况下，我的页面底部有一个按钮（i_am_the_buttons_name），然后当我点击它时，我希望它显示一个说出其名称的警报。这很好用。问题是，在我点击＆＃34; Plus＆＃34;按钮添加一行文本框/按钮并尝试单击动态创建的按钮，没有任何反应。我附上了一张显示此图片的图片。我希望这是有道理的。

jQuery的：

<script>
        $(window).load(function(){
            $(document).ready(function () {

                var counter = 1;

                $("#removeButtonByID").click(function () {
                    alert(this.name);
                });

                $("#addButton").click(function () {
                    $('<div/>',{'id':'TextBoxDiv' + counter}).html(
                      $('<label/>').html( 'Line #' + counter + ' :  ' )
                    )

                    .append($('<input type="text" placeholder="Item Name">').attr({ 'id': 'textbox' + counter, 'name': 'txtItemName' + counter }))
                    .append($('<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-minus"></span></button>').attr({ 'name': 'btnRemove' + counter, 'id': 'removeButtonByID' }))
                    .append($('<br />'))
                    .appendTo('#TextBoxesGroup')

                    counter++;
                });
            });
        });
    </script>

HTML：

<hr />
<div id='TextBoxesGroup'>
    <!-- Dynamically added textboxes here -->
</div>
<hr />
<button type="button" class="btn btn-default" id='addButton'>
    <span class="glyphicon glyphicon-plus"></span>
</button>
<button type="button" class="btn btn-default" name="i_am_the_buttons_name" id='removeButtonByID'>
    <span class="glyphicon glyphicon-minus"></span>
</button>

Answer 1

您需要使用.on因为您可能拥有动态生成的元素，您可能希望拥有先前绑定到同一元素选择器的相同点击处理程序，然后您可以＆＃34;委托＆＃34;使用on（）和selector参数的click事件。

P.S。更改类中的id，因为id必须是唯一的。

使用Javascript：

<script>
        $(window).load(function(){
            $(document).ready(function () {

                var counter = 1;

                $("body").on("click",'.removeButtonByID'function () {
                    alert(this.name);
                });

                $(".addButton").click(function () {
                    $('<div/>',{'id':'TextBoxDiv' + counter}).html(
                      $('<label/>').html( 'Line #' + counter + ' :  ' )
                    )

                    .append($('<input type="text" placeholder="Item Name">').attr({ 'id': 'textbox' + counter, 'name': 'txtItemName' + counter }))
                    .append($('<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-minus"></span></button>').attr({ 'name': 'btnRemove' + counter, 'class': 'removeButtonByID' }))
                    .append($('<br />'))
                    .appendTo('#TextBoxesGroup')

                    counter++;
                });
            });
        });
    </script>

HTML：

<hr />
<div id='TextBoxesGroup'>
    <!-- Dynamically added textboxes here -->
</div>
<hr />
<button type="button" class="btn btn-default" class='addButton'>
    <span class="glyphicon glyphicon-plus"></span>
</button>
<button type="button" class="btn btn-default" name="i_am_the_buttons_name" class='removeButtonByID'>
    <span class="glyphicon glyphicon-minus"></span>
</button>

Answer 2

这样绑定：

$(document).on('click', '.removeButtonByID', function() {
  console.log(this.name);
});

由于其他元素是动态的，因此您需要将click处理程序绑定到document对象，并将id作为参数提供。

此外，最好使用class代替id作为标识符。因为ID应该是唯一的。

<强> 段：

＆＃13;

$(document).ready(function () {
    var counter = 1;
    $(document).on('click', '.removeButtonByID', function() {
        alert(this.name);
    });
    $("#addButton").click(function () {
        $('<div/>', { 'id': 'TextBoxDiv' + counter })
        .html($('<label/>').html('Line #' + counter + ' :  '))
        .append($('<input type="text" placeholder="Item Name">').attr({ 'id': 'textbox' + counter, 'name': 'txtItemName' + counter }))
        .append($('<button type="button" class="btn btn-default removeButtonByID"><span class="glyphicon glyphicon-minus">-</span></button>').attr({ 'name': 'btnRemove' + counter }))
        .append($('<br />'))
        .appendTo('#TextBoxesGroup');
        counter++;
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<hr />
<div id='TextBoxesGroup'></div>
<hr />
<button type="button" class="btn btn-default" id='addButton'>
    <span class="glyphicon glyphicon-plus">+</span>
</button>
<button type="button" class="btn btn-default removeButtonByID" name="i_am_the_buttons_name">
    <span class="glyphicon glyphicon-minus">-</span>
</button>

＆＃13;

希望这有帮助。

为动态创建的控件触发事件

2 个答案: