禁用href，做一些ajax的东西，重新启用href

Question

问题来了：

我有一个标签，当我点击它时，我的 href 值会出现一个弹出窗口（fancybox），

<a class="myIdentifier" href="#myPopup">pop</a>

但是，当我点击它时，我必须使用 ajax 做一些事情来将字段更新到我的弹出窗口中......在它出现之前！

$("body").on('click','.myIdentifier',function(event){
    //DO SOME AJAX AND FILL MY POPUP FIELDS
});

所以这个 ajax 东西必须在“href”用于调用弹出窗口之前完成......

我正在寻找一种方法在我执行 jquery 功能时禁用我的 href，然后重新启用它以使弹出窗口出现...

谢谢

编辑/更新 ::

嗯，谢谢你的所有回答，但是，看看这个：

<a class="btn btn-warning editImp" href="#editImpPopup" title="Edit" id="22">EDIT</a>
<a class="btn btn-warning editImp" href="#editImpPopup" title="Edit" id="32">EDIT</a>
<a class="btn btn-warning editImp" href="#editImpPopup" title="Edit" id="44">EDIT</a>

preventDefault() 不起作用...看起来fancybox 不关心它...事件是用href 触发的...

我使用 jquery.fancybox.js，这是一个库，我不知道如何手动调用弹出窗口！我想我应该把这些a标签变成其他不响应fancybox代码的标签，应用我的ajax东西来填写表格，然后“手动生成”一个“点击带有“editImpPopup”的href设置的aa标签”.. .

但是怎么做？？

谢谢！

（对不起我的英语，这不是我的母语......）

完整代码：

HTML（调用弹出窗口的链接）：

<span class="linkhere">
    <a class="btn btn-warning editImp" href="#editImpPopup" title="Modifier" id="191-150">
        <i class="fa fa-edit"></i>
    </a>
</span>
<span class="linkhere">
    <a class="btn btn-warning editImp" href="#editImpPopup" title="Modifier" id="190-140">
        <i class="fa fa-edit"></i>
    </a>
</span>

JS（初始化fancybox）：

$(".editImp").fancybox({
    type    :"inline",
    closeBtn :true
});

JS（on.click 函数，我在表单中填写我的输入）：

$("body").on('click','.editImp',function(){

    var id=this.id;
    var tab = id.split('-');
    id = tab[0];
    var ets = tab[1];
    $.ajax({
        type : 'POST',
        url : './php/utils/getImpData.php',
        data : {'id':id},
        dataType : 'json',
        error : function(response){
            alert("ERROR GET IMPLANTATION DATA");
        },
        success : function(response){
            alert(JSON.stringify(response));
            $("#etsEditImp option").removeAttr('selected').filter("[value='"+ets+"']").attr('selected',true);
            $("#stageEditImp option").removeAttr('selected').filter("[value='"+response[0].stage+"']").attr('selected',true);
            $("#downEditImp option").removeAttr('selected').filter("[value='"+response[0].down+"']").attr('selected',true);
            $("#locEditImp option").removeAttr('selected').filter("[value='"+response[0].loc+"']").attr('selected',true);
            $("#nameEditImp").val(response[0].name);
            $("#streetEditImp").val(response[0].street);
            $("#numEditImp").val(response[0].num);
            $("#bEditImp").val(response[0].b);
            $("#prevStage").val(response[0].stage);
            $("#prevDown").val(response[0].down);
            $("#idImp").val(id);
            $("#prevEts").val(ets);
        }
    });
});

更新 2：

我试试这个...：

$(".editImp").fancybox({
    type    :"inline",
    closeBtn :true,
    beforeLoad : function(event){
        alert("TEST");
        var id=$(this).id;
        var tab = id.split('-');
        id = tab[0];
        var ets = tab[1];
        $.ajax({
            //...CODE
        });
    },
    onStart : function(){alert("TESTSTART");}
});

我收到此错误：id 未定义！ 我无法将 id 恢复到这部分？

Answer 1

您可以保存第一次点击元素的事实（例如，使用类），以检查点击是用于发送 ajax 还是用于打开弹出窗口。

顺便提一下：.always() 用于测试。如果您只想在 ajax 成功时显示弹出窗口，则应改为 .done()。

Fiddle.

JS：

$(document).ready(function()
{
    $('.myIdentifier').fancybox();

    $("body").on('click', '.myIdentifier', function()
    {
        var thisEl = $(this);
        if (!thisEl.hasClass("js-ajax_done"))
        { 
            $.ajax({ url: "incorrect_url"}).always(function()
            {
                $('#log').append("Ajax is done<br/>");
                $('#myPopup').text("Ajax data");
                thisEl.addClass("js-ajax_done");
                thisEl.click();
            });
            $('#log').append("End of first click (waiting for ajax)<br/>");
            return false;
        }
        $('#log').append("End of second click (ready to open popup)<br/>");
        thisEl.removeClass("js-ajax_done");
    });
});

HTML：

<a class="myIdentifier" href="#myPopup">pop1</a>
<a class="myIdentifier" href="#myPopup">pop2</a>
<a class="myIdentifier" href="#myPopup">pop3</a>
<div id="myPopup" style="display: none">Popup</div>

<div id="log"></div>

Answer 2

只需在完成 Ajax 后执行 event.preventDefault() 并调用弹出脚本即可。

$(document).on('click','.myIdentifier',function(event){
    event.preventDefault();
    showLoader();
    $.ajax({
       url: $(this).attr('href'),
       success: function(data){
          $('#someStuff').val(data);
          callPopup();
       }
    });
});

Answer 3

您首先如何/何时为目标元素初始化 FancyBox 插件？页面何时加载？

相反，也许初始化它以响应 AJAX 调用。看一下“手册 1”示例here。请注意，在页面的源代码中它不会立即初始化插件，而是仅在点击事件之后：

$("#manual1").click(function() {
    $.fancybox({
        // options
    });
});

您可能可以使用相同的结构来响应 AJAX 调用：

$("#yourElement").click(function() {
    $.ajax({
        // options
    }).done(function (response) {
        $.fancybox({
            // options
        });
    }).fail(function () {
        // handle error
    });
});

Answer 4

使用这个：

$("body").on('click','.myIdentifier',function(event){
    event.preventDefault();
    //DO SOME AJAX AND FILL MY POPUP FIELDS


    // on ajax success
    callPapup();

});

编辑

$( "#foo" ).trigger( "click" )改为callPopup()；