Question

我在一个网页上有以下代码：

    <section class="block" id="panel1">
    </section>
    <section class="block" id="panel2">
    <div class="loadcontent">
    <div class="vcard">
    [content here]
    <a href="detail1.html">Proceed to detail level1</a>
    </div>
    </div>
    </section>
    <section class="block" id="panel3">
    <div class="loadcontent">
    <div class="vcard">
    [content here]
    </div>
    </div>
    </section>

我正在使用的jquery是：

<script>
jQuery(function($) {
                $(".loadcontent").on("click","a",function(ev) {                   
                    ev.preventDefault();
                    var $el = $(this);
                    var $lc = $el.closest(".loadcontent");
                    URLtarget = $el.attr("href");

                    //alert("URL:"+URLtarget+"\nZIndex:"+zindex+"\nATTR:"+$el.className);
                    $.ajax({
                        url: URLtarget, 
                        data: {},
                        type: 'post',
                        error: function(XMLHttpRequest, textStatus, errorThrown){
                            alert('status:' + XMLHttpRequest.status + ', status text: ' + XMLHttpRequest.statusText);
                        },
                        success: function(data){
                            $lc.find(".vcard").fadeOut(1000,function() {                                
                            });                             
                            $lc.append(data);
                        }
                    });
                });
});

在detail1.html上我有以下代码：

    <div class="vcard">
    <div><a href="#" class="closeme"> &times; CLOSE </a></div>
    [content here]
    <a href="detail2.html">Proceed to detail level1</a>
    </div>

并且在detail2.html上与detail1相同但具有不同的内容模板（和数据）。当我启动第一个链接时，它可以正常加载detail1.html但是当我点击detail1.html里面的detail2.html它会导致新页面（ajax无法正常工作）。我认为$ .on（）正在“监听”dom上的每个附加事件，这是正确的方法吗？

此外，我尝试使用另一个.on作为.closeme链接，但它不起作用，它将我引导到文档的顶部。

任何人都能解释一下吗？

Answer 1

所以实际上我找到了答案，这里有不同的问题。

而不是$(_selector_).on("click","a",function() { ... }); 它需要$(document).on("click","_selector_ a",function() { ... });

Answer 2

如果要生成<section>块，则不会为它们设置事件处理程序。请记住，当您使用on委托时，如果只能将事件处理程序附加到DOM中当前存在的元素。如果您不知道将添加哪些元素，请使用$(document).on()。

Jquery不能通过ajax $ .ajax第二个链接

2 个答案: