Question

我有以下代码：

$(document).ready( function(){
        var rebuild = getParameterByName("rebuild");

        var createdStructures = $('#AtoZContentDiv').children().length;


        if ((rebuild !== undefined && rebuild !== null && rebuild.indexOf("true") === 0) || (createdStructures === 0))
        {
            // clean up pre-existing data
            cleanUp();


            // create container structure
            createFormLinkContainers();

            // Call SP web services to retrieve the information and create the A to Z
            retrieveListData();

            completeInitialization();
        }
        else
        {
            aggregateAll = jQuery.parseJSON($('#hdnAggregateAll').val());
            aggregatePersonal = jQuery.parseJSON($('#hdnAggregatePersonal').val());
            aggregateBusiness = jQuery.parseJSON($('#hdnAggregateBusiness').val());
            ministryAggregate = jQuery.parseJSON($('#hdnMinistryAggregate').val());
            caAggregate = jQuery.parseJSON($('#hdnCAAggregate').val());
            sTaxAggregate = jQuery.parseJSON($('#hdnSTaxAggregate').val());
            bTaxAggregate = jQuery.parseJSON($('#hdnBTaxAggregate').val());
            leTaxAggregate = jQuery.parseJSON($('#hdnLETaxAggregate').val());

            var type = getParameterByName("filter");

        $( "#tab-all" ).click(function()
        {
                loadit('all');
        });         


        $( "#tab-business" ).click(function()
        {
            loadit('business');
        });

        $( "#tab-personal" ).click(function()
        {

        });


        $(document).on('click','#tab-personal',function(e){
         loadit('personal');    
        });


                buildFilterMenu();
                loadit('all');
        }
    });

我尝试过使用两者：

$(document).on('click','#tab-personal',function(e){
 loadit('personal');    
});

和

$( "#tab-personal" ).click(function()
{

});

当我在其中任何一个中放置一个断点时，没有一个被击中。

HTML：

<div id="tabs" style="display: inline-block;">
    <ul><li><a class="selected" id="tab-all" href="#" type="all"><b>All Forms</b></a></li>
    <li><a id="tab-business" href="#" type="business"><b>Business</b> </a></li>
    <li><a id="tab-personal" href="#" type="personal"><b>Personal</b> </a></li></ul>
</div>

完整代码：http://pastebin.com/vzLPX3cU

为什么会这样？

Answer 1

$(document).ready( function(){
    var rebuild = getParameterByName("rebuild");
    var createdStructures = $('#AtoZContentDiv').children().length;
    if ((rebuild !== undefined && rebuild !== null && rebuild.indexOf("true") === 0) || (createdStructures === 0)){
        // clean up pre-existing data
        cleanUp();

        // create container structure
        createFormLinkContainers();

        // Call SP web services to retrieve the information and create the A to Z
        retrieveListData();
        completeInitialization();
    }else{
        aggregateAll = jQuery.parseJSON($('#hdnAggregateAll').val());
        aggregatePersonal = jQuery.parseJSON($('#hdnAggregatePersonal').val());
        aggregateBusiness = jQuery.parseJSON($('#hdnAggregateBusiness').val());
        ministryAggregate = jQuery.parseJSON($('#hdnMinistryAggregate').val());
        caAggregate = jQuery.parseJSON($('#hdnCAAggregate').val());
        sTaxAggregate = jQuery.parseJSON($('#hdnSTaxAggregate').val());
        bTaxAggregate = jQuery.parseJSON($('#hdnBTaxAggregate').val());
        leTaxAggregate = jQuery.parseJSON($('#hdnLETaxAggregate').val());

        var type = getParameterByName("filter");
            buildFilterMenu();
            loadit('all');
    }
    $( "#tab-all" ).click(function(){
            loadit('all');
    });         

    $( "#tab-business" ).click(function(){
        loadit('business');
    });

    $(document).on('click','#tab-personal',function(e){
        loadit('personal');    
    });
});

Answer 2

它正在发生，因为您尚未禁用锚元素的默认行为。在click事件中，使用event.preventDefault()

停止默认行为

类似这样的事情

$( "#tab-personal" ).click(function(event){
    event.preventDefault(); # this will prevent the default behavior
    # do something
});

因为它已经在ready()函数内部，所以你不需要将它包装在一个更准备好的函数中

Javascript - 点击处理程序忽略/跳过

2 个答案: