Question

我有按钮点击，当放在“jquery”标签中的div内时不会触发。面板。似乎点击了＆＃39;事件不会在DOM中向上传播。寻找解决问题的任何解决方案。

jsfiddle: https://jsfiddle.net/zu868twm/5/

**HTML**
<div id="tabs">
<ul>
  <li><a href="#tabs-1">Tab 1</a>
  </li>
  <li><a href="#tabs-2">Tab 2</a>
  </li>
</ul>    <div id="tabs-1">
<div class="div-first" >Content for Tab 1</div>
</div>
<div id="tabs-2">
<div>Content for Tab 2</div>
</div>
</div>
<hr>
<div id="tabid">Message:</div>


** JScript **
$(document).bind( 'ready', function(){

jQuery("#tabs").tabs({
        activate: function(event, ui) {
          var active = jQuery('#tabs').tabs('option', 'active');
              //Populate #tab-1 with submit button

       str1 = '<div class="span_spe"><button class="rdbox1 error   
         req_homepage check_spe" name="req_s" >TabDivButton</button></div>';

                //content only for #tab-1 for this example

        $('#tabs-1 .div-first').show();
                $('#tabs-1 .div-first').html('');
      $('#tabs-1 .div-first').html(str1);

   }
    });
});

 //Click 'Tab 2' and then 'Tab 1' manually to see the button first.
//Main issue: this trigger handler not working on button click.

jQuery('#tabs-1 .div-first button').click(function() {
    jQuery("#tabid").html('I am in submit button of tab');
});

Answer 1

这是因为你试图在一个尚不存在的元素上使用jQuery的bind。您正在动态注入按钮，因此您必须使用委托而不是绑定。此外，on是附加事件处理程序的首选方法：

$('#tabs-1').on('click', '.div-first button', function() {
    $("#tabid").html('I am in submit button of tab');
});

Jquery选项卡：当按钮作为div的一部分放置在jquery选项卡面板

1 个答案: