javascript - 如何将使用ajax创建的元素的值分配给隐藏的表单字段？

Question

有一个带有按钮的 div。当您单击该按钮时，会出现一个表单。然后 div 的 id 被分配给表单的隐藏字段。这适用于页面加载时页面上的 div。它不适用于页面加载后通过 ajax 创建的 div。

<div class=\"maincircle\">
    <div class=\"textcircle\" data-id=\"$name\" onclick=\"displayLevel3('$name');\">". $row['name'] ."</div>
    <button class=\"add1\" id=\"$name\" onclick=\"toggle_visibility('addleaf');\"></button>
    <button class=\"add2\" data-id=\"$name\" onclick=\"toggle_visibility('addsibling');\"></button>
    <button class = \"delete\" data-id= \"$name\"></button>
</div>

点击“textcircle”后，ajax 显示更多具有相同布局的 div:

    $.ajax( { type : 'POST',
      data : {"node" : val},
      url  : 'displaylevel3.php',
      success: function ( data ) {
        $('#level3').html(data);
      },
      error: function ( xhr ) {
        alert( "error" );
      }
    });

}

以下 JavaScript 不适用于由 ajax 创建的这些 div 按钮:

var buttons = document.querySelectorAll('button');

for (var i=0; i<buttons.length; ++i) {
  buttons[i].addEventListener('click', clickFunc);
}

function clickFunc() {
  var id = this.id; 
  document.getElementById('parent').value = id;
  document.getElementById('sibling').value = id;
}

如何将使用ajax创建的按钮的值分配给隐藏的表单字段？

Answer 1

你必须使用 jQuery event-delegation :-

$(document).on('click','button',function(){
  var id = $(this).attr('id');
  $(this).closest('#parent').val(id);
  $(this).closest('#sibling').val(id);
});