用于循环的父母对动态儿童的行动约束

Question

我有一个情况绑定的单击事件与静态添加的静态添加的孩子无效。我的原始帖子包含示例代码，该代码似乎重现了问题，但错误地使用了"动态内容"中的ID代码。

此更新更准确地表示实际实现，但是我无法在此示例中重现该问题。

<div id="page">
  <div id="section-0" class="container">
    <span>section 0</span>
    <div id="section-actions">
      <button class="button action-zero">zero</button>
    </div>
  </div>
  <div id="section-1" class="container">
    <span>section 1</span>
    <div class="section-actions"></div>
  </div>
  <div id="section-2" class="container">
    <span>section 2</span>
    <div class="section-actions"></div>
  </div>
<script>
action_array = ['zero', 'one', 'two', 'three'];
section_actions = ['one', 'two', 'three'];
add_section_actions();
bind_actions();
function add_section_actions() {
  for (var s = 1; s <= 2; s++) { // for sections 1 and 2
    var actions_html = '';
    for (var i = 0; i < section_actions.length; i++) { // for all the actions
      var action = section_actions[i];
      actions_html = actions_html + '<button class="action-' + action + '">' + action + '</button>';
    }
    $('#section-'+s+' .section-actions').html(actions_html);
  }
}
function bind_actions() {
  //console.log('bind_actions called');
  for (var i = 0; i < action_array.length; i++) {
    //console.log(i);
    var action = action_array[i];
    //console.log('attempting to bind action for '+action);
    $('#page').on('click', '.action-' + action, function() {
      var this_container = $(this).closest('.container');
      var this_container_id = this_container.attr('id');
      console.log('this_container_id: ' + this_container_id);
    });
  }
}
</script>

Answer 1

将类class="action-'+action+'"添加到您的按钮

actions_html = actions_html + '<button class="action-'+action+'" id="section-2-button-' + action + '">' + action + '</button>';

demo

action_array = ['zero', 'one', 'two', 'three'];
section_two_actions = ['one', 'two', 'three'];
add_section_two_actions();
bind_actions();
function add_section_two_actions() {
  var actions_html = '';
  for (var i = 0; i < section_two_actions.length; i++) {
    var action = section_two_actions[i];
    //console.log('adding section 2 action: '+action);
    actions_html = actions_html + '<button class="action-'+action+'" id="section-2-button-' + action + '">' + action + '</button>';
  }
  $('#section-2-actions').html(actions_html);
}
function bind_actions() {
  //console.log('bind_actions called');
  for (var i = 0; i < action_array.length; i++) {
    //console.log(i);
    var action = action_array[i];
    //console.log('attempting to bind action for '+action);
    $('#page').on('click', '.action-' + action, function() {
      var this_container = $(this).closest('.container');
      var this_container_id = this_container.attr('id');
      console.log('this_container_id: ' + this_container_id);
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
  <div id="section-0" class="container">
    <span>section 0</span>
    <div id="section-0-actions">
      <button class="button action-zero">zero</button>
    </div>
  </div>
  <div id="section-1" class="container">
    <span>section 1</span>
    <div id="section-1-actions">
      <button class="button action-one">one</button>
      <button class="button action-two">two</button>
      <button class="button action-three">three</button>
    </div>
  </div>
  <div id="section-2" class="container">
    <span>section 2</span>
    <div id="section-2-actions"></div>
  </div>
</div>