admin管理员组

文章数量:1378769

I am trying to set up two button groups. A click on any button in the second group should add a new button to the first group. The new button shall get the same label as the clicked button.

var name = this.textContent works if the click handler is attached to a single button. How do you get the text content of the clicked button when the click handler is instead attached to a group of buttons?

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

I am trying to set up two button groups. A click on any button in the second group should add a new button to the first group. The new button shall get the same label as the clicked button.

var name = this.textContent works if the click handler is attached to a single button. How do you get the text content of the clicked button when the click handler is instead attached to a group of buttons?

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

  • javascript
  • jquery
Share Improve this question edited Mar 13, 2016 at 20:25 bogl asked Mar 13, 2016 at 19:54 boglbogl 1,8641 gold badge17 silver badges32 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

Use event delegation: 

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

Second parameter in 'on' method can be selector string to filter the descendants of the selected elements that trigger the event. Check this https://jsfiddle/q6b6g3xm/

In your case, this should be enought:

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

Prefer the RobHil solution if you other buttons will be created in #group2 after the execution of the jQuery code.

Else, I see two other possibilities:

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

or:

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

But keep in mind the target depend on where you click if you have nested blocks in the clicked zone: https://api.jquery./event.target/

Here is my own approach to the problem. I modified HTML code a little by adding individual id to the buttons.

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>');

            });

本文标签： javascriptButton Group Click HandlerHow to get text content of clicked buttonStack Overflow

版权声明：本文标题：javascript - Button Group Click Handler - How to get text content of clicked button? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744500129a2609274.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。