jQuery对话框选择器不响应使用Ajax加载的元素的类名

更新：问题已解决：

由于“有问题”的元素是在页面加载AD之后创建的，因此事件委派确保所有元素都绑定到jQuery事件

原创帖子：

我得到了一段代码：

while ($row=mysqli_fetch_array($res)){
    if($cont>3){
       $cont=1;
       $txt=$txt.'</tr><tr>';
    }
    $txt=$txt.'<td>'; 
    $txt=$txt.'<figure><img src="'.$row['picture'].'"/></figure>';
    $txt=$txt.'<figcaption>'.$row['pictureDesc'].'</figcaption>'; 
    $txt=$txt.'<div class="dialogInfoOpener" style="border:solid red 1px;">Details</div>'; 
    $txt=$txt.'</td>';    
    $cont++; 
}   
$txt=$txt.'</tr>';
echo $txt;

jQuery

$("#dialogInfo").dialog({ 
    autoOpen: false,
    buttons:[{
        text: "Close", click : 
        function(){
            $(this).dialog("close");
        }
    }]
});


$(".dialogInfoOpener").click(function(event){</s>
    $("#dialogInfo").dialog("open");</s>
});</s>

$（“#dialogInfo”）.dialog（{
自动打开：错误，
按钮：[{
文本：“关闭”，单击：
函数（）{
$（此）.dialog（“关闭”）；
}
}]
});
$（“.dialogInfoOpener”）。单击（函数（事件）{
$（“#dialogInfo”）。对话框（“打开”）；
});

该代码非常适用于页面上具有类

dialogInfoOpener

的任何元素，但不适用于属于刚刚构造的表的任何

div

元素。当单击这些div时，它不会做任何事情（为每个单元格正确设置了类和样式属性）。jQuery似乎没有响应给定给div的类名。为什么?

我希望这是清楚的

---

如果您有任何有用的建议，我将不胜感激。

由于这些元素是动态创建的，您可以使用，例如：

通常有比

文档

更好的选择器可供使用-找到

元素的一致父元素。dialogInfoOpener

元素并使用它

---

此外，我认为您可能有输入错误-您的HTML使用了

#dialogInfo

，但在您的单击功能中您使用的是

。dialogInfo

？记住ID必须是唯一的，如果您有多个ID，只需使用一个类。

在Ajax调用完成后重新运行连接click事件的代码。尝试解除绑定/绑定，这样就不会触发重复事件

您混合了ID和类

---

$（“#dialogInfo”）。dialog（{

使用ID，但

$（“.dialogInfo”）。dialog（“打开”）

使用一个类。如果你使用相同的类，你会修复它。

是的，这是一个打字错误。编辑了这篇文章，谢谢。

#dialogInfo

是对话框本身的id，

。dialogInfoOpener

是单元格中div的类名。我已经尝试了你的建议：它仍然不起作用（即使使用文档）；下一个一致的父项是

表

，然后是

节

，最后是

正文

。它们中的任何一个都没有成功。@absay您在控制台中收到任何错误吗？除非有加载问题，否则我看不出它是如何工作的：/谢谢。不，我在控制台中没有收到任何错误。我还学到了ab找出什么是事件委派，这似乎是正确的答案，尽管在我的代码中它不起作用（如果我取消委派的话，

on（）

会用一个特定的选择器将事件绑定到任何元素，在任何时候创建，对吗？）@absay确实，它是用于将事件绑定到页面最初加载时可能不存在的元素。是否有可能创建一个JSFIDLE示例来重新定位您的问题？不管怎样，事件委派是答案。我复制了这个问题并在别处测试了它，发现它工作正常，然后认真考虑输入我的l明天早上，我在我的实际功能中使用了一个非常特殊的选择器（

table#mainTable tbody td.dialogInfoOpener

）虽然如此，我还是不会放弃精神病院的想法，因为还有更奇怪的工作等着我，哈哈。谢谢@null，你的规则！谢谢你。我尝试过事件委托。没有成功。我不明白你说的在de ajax完成后再运行代码是什么意思，尽管听起来很有道理。介意详细说明一下吗我是否应该将jquery代码封装在一个函数中，然后在Ajax js函数的末尾调用该函数？

$("#dialogInfo").dialog({ 
    autoOpen: false,
    buttons:[{
        text: "Close", click : 
        function(){
            $(this).dialog("close");
        }
    }]
});


$(".dialogInfoOpener").click(function(event){</s>
    $("#dialogInfo").dialog("open");</s>
});</s>

$(document).on("click", ".dialogInfoOpener", function(event){
    $(".dialogInfo").dialog("open");
});