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

<强> 演示

＆＃13;

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

＆＃13;

<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>

＆＃13;

用于动态子操作的循环父绑定

1 个答案: