javascript - 如果已经加载，则阻止 .load() ？

Question

我在一个页面上有几个按钮。每个按钮加载不同的部分“ View ”并使用 jQuery .load() 方法。

它工作得很好，但我注意到，如果我继续点击这个特定的按钮，它会不断地一遍又一遍地加载部分 View ，直到我停止。我确信我最终可能会使网站崩溃(不好!)。

我尝试缓存它(通过装饰 Controller 方法和持续时间等)，但它不起作用。我怀疑这是因为我通过单击按钮加载此 View 。

如何防止在用户不知情的情况下重复加载此“ View ”？

这是我的 jQuery/Javascript:

//"Select Area" button - click event
    $(".btnAreaDiv .btn-myClass").click(function () {

        switch (this.id) {
            case "btnMyButton":
                    $('#myDiv').load('_MyPartialView'); //to-do: only load me, if I haven't been loaded?
                break;
            //more code etc., more button handling
        }
    }

这是_MyPartialView.cshtml的内容:

@{
    Layout = null;
}

<div class="row">
    <div class="col-md-6">
        <div class="row" style="width:97%">
            <div class="col-md-12" style="border:2px solid #c5c5c5"><span id="lblMySelector">My Selector</span></div>
        </div>
    </div>
    <div class="col-md-6"></div>
</div>

<div class="row nopadding checkboxDiv mySelector">
    <div class="col-md-12 nopadding">
        <input id="myCheckBox" type="checkbox" /><label for="myCheckBox">Include all/label> <br />
    </div>
</div>

当然还有我的 Controller 中的 ActionResult 方法:

public ActionResult _MyPartialView()
{
    return View();
}

我已经尝试过这个，但没有成功:

switch (this.id) {
    case "btnMyButton":
        if (!$('#lblMySelector').length) {

            console.log('label not found', $('#lblMySelector').length);

            $('#myDiv').load('_MyPartialView'); 

        }
        break;

Answer 1

假设您有一些与此类似的标记:

<button type="button" class="load-some-stuff" id="btnOne">One</button>
<button type="button" class="load-some-stuff" id="btnTwo">Two</button>
<button type="button" class="load-some-stuff" id="btnThree">Three</button>

你正在做这样的事情:

$(function(){

    $('.load-some-stuff').on('click', function(e){

        switch(this.id)
        {
            case 'btnOne':
                $('#some-container').load('example.com');
            break;

            case 'btnTwo':
                $('#some-container').load('example.com');
            break;

            case 'btnThree':
                $('#some-container').load('example.com');
            break;
        }

    });

});

如果您不希望这种情况发生多次，请使用 off 从按钮中删除点击事件:

$(function(){

    $('.load-some-stuff').on('click', function(e){
        // the current button
        var _this = $(this);

        switch(this.id)
        {
            case 'btnOne':
                $('#some-container').load('example.com', function(){
                    _this.off('click'); 
                });
            break;

            case 'btnTwo':
                $('#some-container').load('example.com', function(){
                    _this.off('click'); 
                });
            break;

            case 'btnThree':
                $('#some-container').load('example.com', function(){
                    _this.off('click'); 
                });
            break;
        }

    });

});

您可以更改使用关闭功能的位置；我将其放在回调中，以便在加载失败时进行加载(仅在成功响应代码时调用回调)。