Question

我在这里搜索并谷歌搜索无效的解决方案，很多类似的帖子，但大多数人没有使用.on()或人们缺少结束});等

正如在标题中我正在使用.on('click')并且它只会调用该函数然后停止，如果我使用.click()它按预期工作！我已经检查了控制台，它告诉我同样的事情。

我正在使用jQuery 1.9.1和jQuery-ui 1.10.3并正在使用chrome进行测试。下面的代码（我已经省略了函数中的一些代码并缩短了一些，因为我知道它并不重要）;

HTML：

<section id="Cat_List">
    <ul> 
        <li><a href="?C=44834">Cat 1</a></li>
        <li><a href="?C=10908">Cat 2</a></li>
        <li><a href="?C=58202">Cat 3</a></li>
        <li><a href="?C=73689">Cat 4</a></li>
    </ul>        
</section>

Jquery的：

$('#Cat_list ul').on('click', 'li a', function (e) {
    e.preventDefault();
    var href = this.href.split('?C=').pop();
    $('.loading').center('fixed').show();
    console.log(href[1]);
    $.ajax({
        url: Script,
        type: "POST",
        data: {
            Function: 'Cat',
            Cat: href[1]
        },
        cache: false,
        success: function (Data) {
            console.log(Data);
            /*Place data on second page*/
            $('#Cat_List').hide(500, function () {
                $('#Category_con').show(500);
            });
        }
    });
    return false;
});

我也尝试过改为：

$(document).on('click','#Cat_List ul li a',function(e) {...

没有运气！

功能说明： 正如您所看到的，它获取了UL中所点击链接的类别ID，并获取数据并放置到下一个“屏幕”，然后显示下一个“屏幕”。有一个后退按钮，清除所述屏幕并隐藏它然后再次显示类别列表。

当取消隐藏类别列表时，点击量不会激活该功能！

任何想法如何解决？

Answer 1

我无法使用您的代码对其进行测试，但如果我省略了ajax并使用正确的ID（您在JS（Cat_List）中使用了大写字母L，那么它可以正常工作，请参阅此处： http://jsfiddle.net/6ZVBt/

<section id="Cat_list">
    <ul>
        <li><a href="?C=44834">Cat 1</a>

        </li>
        <li><a href="?C=10908">Cat 2</a>

        </li>
        <li><a href="?C=58202">Cat 3</a>

        </li>
        <li><a href="?C=73689">Cat 4</a>

        </li>
    </ul>
</section>
<section id="next_page">Next Page</section>

和JS：

$('#Cat_list ul').on('click', 'li a', function (e) {
    e.preventDefault();
    var href = this.href.split('?C=').pop();
    console.log(href[1]);

    $('#Cat_list').hide(500, function () {
        $('#next_page').show(500);
    });
    return false;
});
$(document).on('click', '#next_page', function (e) {
    e.preventDefault();
    $('#next_page').hide(500, function () {
        $('#Cat_list').show(500);
    });
    return false;
});

Answer 2

不确定$('.loading').center('fixed').show();是什么，但如果是叠加层，则不会将其删除!!

Answer 3

问题源于一小段代码，相当尴尬，我错过了/忘记了我进入，更新了jquery ui按钮。

$(document).ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
    $('button').button();
}).ready(function (){...

不太确定这是如何影响.on从第二次开火但现在移除它按预期工作！

对我的愚蠢道歉！谢谢你的帮助！

Jquery .on（'click'）只触发一次然后停止

3 个答案: