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

Answer 2

已经给出了答案。您也可以尝试使用以下内容：

$(document).ready(function() {
     $(".add1").click(function() {
           var id = $(this).attr('id');

           alert(id);
     });
});

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

2 个答案: