<a>标记中的</a> jQuery onclick函数<a>第二次不起作用</a>

Question

I am trying a load a page on click of tag which is bootstrap nav bar. It works fine in first time. When I click for the second time, it doesn't work and I get the below error.

0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'tab'

My code:

<script>
        function alertClick(Id) {

            var selector = $(Id).attr('class').toString();
            $('.' + selector).on('click', function () {

                if (selector == "AlertDiv") {

                    $('#Action1').load("/Home/abc");


                }
                if (selector == "Actiondiv") {

                    $('#Action1').load("/Home/def");
                }

            });

        }
</script>
<style>
    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        color: white;
        cursor: default;
        background-color: rgba(115,139,0,0.8) !important;
        border-top: 1px solid #ddd !important;
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-bottom-color: transparent;
        outline: none;
        font-size: 14px;
    }

    .nav-tabs > li > a {
        margin-right: 5px !important;
        line-height: 1.42857143;
        border: 1px solid transparent !important;
        border-radius: 4px 4px 0 0;   
        color: rgba(115,139,0,0.8) !important;
    }

</style>

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid" style="float:right;padding-right:100px">


    <div style="border-bottom: 1px solid #ddd;">
        <ul class="nav nav-tabs">
            <li style="border-bottom: 1px solid transparent;">
                <a class="AlertDiv" href="#" onclick="alertClick(this)" data-toggle="tab">
                    Alert heading1

                </a>
            </li>
            <li>
                <a class="Actiondiv" href="#" onclick="alertClick(this)" data-toggle="tab">
                    Action1 heading1
                </a>
            </li>


        </ul>
    </div>
</div>

<div class="container" id="Action1">


</div>
</nav>

Answer 1

I think you can change to bind click event like:

$('ul.nav-tabs > li > a').on('click', function(){
    var selector = $(this).attr('class');
    if (selector == "AlertDiv") {
        alert('AlertDiv');
        //$('#Action1').load("/Home/abc");
    }
    if (selector == "Actiondiv") {
        alert('Action1');
        //$('#Action1').load("/Home/def");
    }
});

fiddle