Jqueryタブ：jqueryタブパネルに配置されたdivの一部としてボタンが配置されていると、click-event-handlerが機能しない

Question

'jquery tab'パネルのdiv内に配置されたときにトリガーしないボタンがあります。 'click'イベントは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'); 
});