Question

我正在尝试设置两个按钮组。单击第二组中的任何按钮都应该向第一个组添加新按钮。新按钮的标签应与点击的按钮相同。

如果单击处理程序附加到单个按钮，则

var name = this.textContent有效。当点击处理程序改为附加到一组按钮时，如何获得单击按钮的文本内容？

HTML：

<body>
  <div id="group1">
    <button> nameA </button>
    <button> nameB </button>
  </div>
  <hr>
  <div id="group2">
    <button> nameC </button>
    <button> nameD </button>
  </div>
</body>

使用Javascript：

$('#group2').on('click', function(event) {
  var name = this.textContent   // wrong!
  var r = $('<input type="button" value="' + name + '">');
  $("div#group1").append(r);
});

JSFiddle Demo

Answer 1

使用事件委托：

$('#group2').on('click', 'button', function(event) {
  var name = this.textContent
  var r = $('<input type="button" value="' + name + '">');
  $("div#group1").append(r);
});

＆＃39; on＆＃39;中的第二个参数method可以是选择器字符串，用于过滤触发事件的所选元素的后代。请检查此https://jsfiddle.net/q6b6g3xm/

Answer 2

在你的情况下，应该这样做：

$('#group2 button').click(function(event) {
  var name = this.textContent
  var r = $('<input type="button" value="' + name + '">');
  $("div#group1").append(r);
});

如果在执行jQuery代码后在＃group2中创建了其他按钮，则首选RobHil解决方案。

否则，我看到另外两种可能性：

$('#group2 button').each(function () {
  var $button = $(this).click(function(event) {
    var r = $('<input type="button" value="' + $button.text() + '">');
    $("div#group1").append(r);
  });
});

或：

$('#group2').click(function(event) {
  var $button = $(event.target);
  var r = $('<input type="button" value="' + $button.text() + '">');
  $("div#group1").append(r);
});

但请记住，如果您在点击的区域中嵌套了块，则目标取决于您点击的位置：https://api.jquery.com/event.target/

Answer 3

这是我自己解决问题的方法。我通过在按钮上添加个人id来修改HTML代码。

HTML：

<div id="group1" >
    <button id="btn-A">nameA</button>
    <button id="btn-B">nameB</button>
    <button id="btn-C">nameC</button>
</div>
    <hr />
<div id="group2">
    <button id="btn-D">nameD</button>
    <button id="btn-E">nameE</button>
    <button id="btn-F">nameF</button>
</div>

JavaScript的：

             // click on the button
            $(document).on('click','button', function(){

                //store the value of the id and
                //  split it @ '-' into array ['btn','A']
                $id = $(this).attr('id').split('-');

                // store the value at index 1 into $id
                $id = $id[1];

                //get the Id of the current div group
                $divId = $(this).closest('div').attr('id');

                //check which div group is current and
                //Assign the reversed value as appropriate
                if($divId === "group1"){
                    $addId = "#group2";

                }else {
                    $addId = "#group1";
                }

                //Remove the button from the group
                $(this).remove();

                //Add the button to the second div group
                $($addId).append('<button id="btn-'+$id+'">'+$(this).text()+'</button>');

            });

按钮组单击处理程序 - 如何获取单击按钮的文本内容？

3 个答案: