Question

我有这个代码，如果＆lt; a＆gt;被放置在＆lt; div id =“list”＆gt;之外但是当链接放在目标div中时不会。 event.preventDefault（）甚至没有被触发。任何帮助将受到高度赞赏。谢谢！

    <script>
    $( document ).ready(function() {
        $( ".category_link" ).on('click' ,function () {
            event.preventDefault();
            var addressValue = $(this).attr("href");
            function getUrlVars()
            {
                var vars = [], hash;
                var hashes = addressValue.slice(addressValue.indexOf('?') + 1).split('&');
                for(var i = 0; i < hashes.length; i++)
                {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            }
            site_location = getUrlVars()["location"];
            category_id = getUrlVars()["category_id"];
            per_page = getUrlVars()["per_page"];
            request_type = getUrlVars()["request_type"];

            //send the request via ajax
            $.ajax({
                    type: "POST",
                    url: "/test/testing/",
                    data: {site_location : site_location, category_id : category_id, per_page : per_page},
                    dataType: "html"
            }).done(function( msg ) {
                //get the returned message
                $( "#list" ).html(msg);
            }); 

        }); 
    });
</script>



<div id="list">
<a class="category_link" href="/?site_location=testing&per_page=testing&category_id=testing&request_type=testing">Test</a>

Answer 1

您将点击处理程序绑定到该a元素。当ajax完成时，它将a元素替换为新的元素，该元素没有绑定到它的点击处理程序。

请改用：

$("#list").on('click', '.category_link', function (event) {

on()版本使用事件委托，并使用动态元素。

请参阅on()，尤其是有关直接和委派活动的部分。

（请注意，您应该添加event参数。有些浏览器不关心，有些浏览器不关心。）

Answer 2

$( ".category_link" ).on('click' ,function ()

如果category_link动态添加到#list容器，则不会触发此事件。您必须处理事件委托，如下所示。

用

替换上述事件

$("#list").on('click', '.category_link', function (event)

注意：event.preventDefault()如果您在上述功能中传递

，则会有效

jQuery ajax实时更新问题

2 个答案: