JQuery .click 函数不适用于包含的 <a> 标签答案

【问题标题】：JQuery .click function not working for contained <a> tagsJQuery .click 函数不适用于包含的 <a> 标签
【发布时间】：2012-04-05 05:21:44
【问题描述】：

我有以下功能应该在我的分页中的任何一个数字被点击时触发。

<script type="text/javascript">
    $("div.pagination a").click(function(event) {
        alert("Click");
        event.preventDefault();
        var url = $(this).attr("href");
        $("input[name='order']").val(order);
        $("#form_session").attr('action', url).submit();
    });
</script>

分页是这样的：

<div class="pagination">
  <ul>
    <li><a href="results.php?page=1&agruments...">1</a></li>
    <li><a href="results.php?page=2&arguments...">2</a></li>
    ...etc
  </ul>
</div>

由于某种原因，该函数永远不会触发。我什至发出了一个非常明显的警报来确认它听到了咔嗒声，但我什至没有看到这个。

那么我做错了什么一切对我来说似乎都是正确的......

【问题讨论】：

当您的代码运行时，DOM 可能还没有准备好。将其放入 DOM 就绪事件处理程序中。

标签： javascript jquery html pagination

【解决方案1】：

尝试将其包裹在 $(document).ready(function () { ... }); 中，如下所示，

 $(document).ready(function () {
   $("div.pagination li").click(function(event) {
        alert("Click");
        event.preventDefault();
        var url = $(this).attr("href");
        $("input[name='order']").val(order);
        $("#form_session").attr('action', url).submit();
    });

 });

如果li 是动态生成的，那么您应该使用.on（用于jQuery 1.7）或.live/.delegate（旧jQuery）。

 $(document).ready(function () {
   $(document).on('click', 'div.pagination li', function(event) {
        alert("Click");
        event.preventDefault();
        var url = $(this).attr("href");
        $("input[name='order']").val(order);
        $("#form_session").attr('action', url).submit();
    });

 });

注意：如果加载时存在div.pagination，请将$(document).on('click', 'div.pagination li', function(event) { 替换为$('div.pagination').on('click', 'li', function(event) {。

【讨论】：

.on 去哪里了？是的
是动态生成的

@Jon 更新为 .on。当我说动态时，这意味着li被插入到ui中，或者整个ul是在运行时使用javascript生成的。

知道了！该功能正在触发。谢谢！

【解决方案3】：

试试：

<script type="text/javascript" language="javascript">
$(document).ready(function () {
    $("div.pagination li a").click(function(event) {
        event.preventDefault();
        alert("Click");
        var url = $(this).attr("href");
        $("input[name='order']").val(order);
        // Where is order coming from?
        $("#form_session").attr('action', url).submit();
    });
});
</script>

您错过了选择器中的a。确保 DOM 准备就绪 $(document).ready。订单变量来自哪里？ order 定义了吗？

【讨论】：

仍然无法正常工作：/ 我也尝试在选择器中执行“div.pagination a”...不走运。
@Jon 是的，你在这里引用了一个变量order：$("input[name='order']").val(order);。这是从哪里来的？
div.pagination ul li 或 div.pagination ul li a 怎么样？我很确定你不能跳过 ul。
这行得通，但现在链接不起作用...它没有将我发送到下一页。
然后删除event.preventDefault();。