Question

我尝试使用jQuery将一个表单从php文件添加到另一个php文件，然后我添加了一个事件到我添加的输入（提交）按钮，但它没有工作，

我看到一些建议使用方法$elm.on("click",function()而不是$elm.click(function()的答案，但它仍无效。

所以这是我的代码：

<div id="update" class="third">
  <div class="updatingzone">
    You will have to rwrite all the data again
    <form method="post" class="updating">
      <input type="text" name="id" class="id" style="width:40px;" />
      <input type="submit" id="button" value="Insert" />
    </form>
    <input type="submit" id="button" class="cancel" value="Cancel" />
  </div>
<div class="insertion"></div>
</div>

当我按下按钮插入时，这个php文件被添加：

<?php require_once "connexion.php";
 $gdb = new GestionBD();
 $id = $_POST["id"];

 $req = "select * from utilisateurs WHERE id='$id'";
 $results = $gdb->selectFromBD($req);


 foreach ($results as $result):
  ?>
  <form class="insertMode" method="post">
    <input type="text" value="<?php echo $result->nom;?>" class="nom"                name="nom" /><br />
    <input type="text" value="<?php echo $result->email;?>" class="email" name="email" /><br />
    <input type="text" value="<?php echo $result->sexe;?>" class="sexe" name="sexe" /><br />
    <input type="text" value="<?php echo $result->age;?>" class="age" name="age" /><br />
    <input class="test" id="button" type="submit" value="Add" />
  </form>
<?php endforeach;?>

当我按下课程测试按钮时，我没有收到警告，其中没有＆＃34;没有＆＃34;消息，正如您在脚本中看到的那样：

$(".updating").submit(function () {
  var id = $(".id").val()
  $(".insertion").show()
  $.post("getId.php",{id:id},function (data) {
    $(".insertion").html(data)
  });
  return false;
});

$(".test").click(function () {
  alert("no");
});

如果这很长，我很抱歉..谢谢大家

Answer 1

由于元素是动态生成的，因此您需要使用event delegation。

$(document).on("click",".test", function () {
 console.log("no");
});

参考文档： https://learn.jquery.com/events/event-delegation/

希望这会对你有所帮助。

Answer 2

将此构造用于动态创建的对象：$(document).on("click", "elementSelector", function(){ /* function body*/})

Answer 3

使用on创建委托事件绑定

$(document).on("click",".test",function(){ ..... });

注意：委派事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

Answer 4

您正在使用的jQuery方法假定当您的Javascript运行时，该元素已经在DOM中（已经存在于页面中）。由于您在脚本运行后将添加到页面，因此使用$(".test")将不会捕获以后添加的任何HTML。

您有两种选择：

<强> 1。只有在插入新HTML后才能查询HTML

将$()查询包含在您插入HTML的同一个回调中，如下所示：

$.post("getId.php", {id:id}, function(data) { $(".insertion").html(data); // this will work now $(".test").on("click", function() { ... }); });

或者，或许更好，将jQuery查询的范围仅限于新插入的HTML：

$.post("getId.php", {id:id}, function(data) { var $insertion = $(".insertion"); $insertion.html(data); // only find .test within the new HTML $insertion.find(".test").on("click", function() { ... }); });

<强> 2。更改jQuery语法以将事件侦听器绑定到正文

正如@diavolic所指出的，jQuery为.on提供了第二种语法，您可以将侦听器绑定到元素，但提供选择器作为第二个参数。只有在与此选择器匹配的元素上触发事件时，才会触发回调。通过将侦听器绑定到body标签（始终存在于DOM中）并提供.test作为选择器，当javascript运行时，.test元素不需要存在于DOM中。 / p>
$(document.body).on("click", ".test", function() { // do something }); $.post("getId.php", {id:id}, function(data) { $(".insertion").html(data); });

任何一个选项都应该有用。如果您只想在特定元素中监听点击次数，则第一个选项是更好的选项。如果您不确定何时或何处插入新HTML，则第二种方法更可靠。

有关活动委派的更多信息，请访问：http://api.jquery.com/on/#direct-and-delegated-events

Answer 5

 //for <input type="button" class="test" value="test">
jQuery(document).ready(function() {
    jQuery('.test').on( 'click', function () {   
    alert('no');    
    });
});

使用jQuery向动态生成的元素添加事件

5 个答案: