Question

我在网上搜索但我没有找到任何答案，因为这个“问题”不是关于.on（）和.click（）之间差异的常见问题。使用jquery 2.1.3时，click函数是$('#button1').click(function() { $('div').html("<p id="button2">Hello</p>"); }); $('#button2').click(function() { alert(0); //THIS DOESN'T WORK }); $(body).on("click", "#button2", function() { alert(0); //THIS WORKS! });的缩写，因此它应该在dom更改后触发函数（或wathever）。但这只有在我使用.on（）时才有效。为什么？（以下示例）

<?php 

session_start();

require('../fpdf17/fpdf.php');

$pdo = new PDO('mysql:host=localhost;dbname=pfe', 'root', '');
$query = $pdo-> prepare("SELECT IdC,Nom,Prenom,CIN,CNE FROM candidats where    IdC = 1 ");
$query->execute();



$pdf=new FPDF();

$pdf->Addpage();


$pdf->SetFont('Times','I','20');
$pdf->SetXY(5,35);
$pdf->Cell(163,10,utf8_decode("Centre d'Etudes Doctorales Sciences et  Applications"),"B","1","L");

$pdf->SetFont('Times','BI','25');
$pdf->SetXY(10,50);
$pdf->Cell(0,0,utf8_decode("Fiche de Candidature à l'Inscription en  "),"0","1","L");

$pdf->SetFont('Times','BI','25');
$pdf->SetXY(15,60);
$pdf->Cell(0,0,utf8_decode("1ére Année de Doctorat(2015- 2016)"),"0","1","L");

$pdf->SetFont('Times','BI','10');
$pdf->SetXY(20,60);
$pdf->Cell(0,0,utf8_decode(foreach($query->fetchAll() as $key=>$value){   print $value['IdC'] ;}),"0","1","L");

$pdf->output();
?>

Answer 1

$('#button1').click(function() {
    $('div').html("<p id='button2'>Hello</p>");
});

$('#button2').click(function() {
    alert(0); //THIS DOESN'T WORK
});

$(document).on("click", "#button2", function() {
    alert(0); //THIS WORKS!
});

这是正确的代码

https://jsfiddle.net/hhe3npux/

Answer 2

但这只有在我使用.on（）时才有效。

首先，您应该意识到：

如果

$('#button2').click(function() {
    alert(0); 
});

来自

之后

$('#button1').click(function() {
    $('div').html("<p id="button2">Hello</p>");
});

喜欢：

   $('#button1').click(function() {
        $('div').html("<p id="button2">Hello</p>");
        $('#button2').click(function() {
          alert(0); 
      });
    });

然后它会起作用。

您在上一个代码中所做的事情是将处理程序附加到因为事件传播而正在工作的body元素。

你的代码工作正常on允许你做选择器匹配+将单个处理程序附加到body元素。

Answer 3

答案是如果您动态添加数据，则必须使用.on函数。使用此代码，您可以使用最后提到的代码来使用事件委派概念。由于DOM尚未注册，因此.click处理程序无法捕获新的DOM元素。

dom更改后.click（）失败

3 个答案: