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的东西要在＆＃34; href＆＃34;之前完成。用来调用弹出窗口......

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

由于

编辑/更新::

好的，谢谢你的所有答案，但是，看看这个：

<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，这是一个库，我不知道如何手动调用弹出窗口！我想我应该将这些标签变成其他标签，这些标签不响应fancybox代码，应用我的ajax填充表单，然后＆＃34;手动生成＆＃34; a＆＃34;点击一个标签，其中href设置为＆＃34; editImpPopup＆＃34;＆＃34; ...

但是如何？

谢谢！

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

完整代码：

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

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

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

Answer 2

如何/何时首先为目标元素初始化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 3

您可以保存第一次单击该元素的事实（例如，使用类），以检查click是用于发送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 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();

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

4 个答案:

修改