javascript - 尝试取消绑定(bind)点击但是当我这样做时，我的 ajax 加载无法正常运行

Question

问题:

我正在做一个模态点击功能。单击模态按钮时，我想加载带有外部页面的模态，这在我第一次单击时运行良好。当我单击另一个链接时，它不起作用。模态数据未加载。

取消绑定(bind)点击不在:

• https://gyazo.com/9f00a5856f656f45179eaca54d842224 (前几部作品)
• https://gyazo.com/b50c47330ae031480ee99b9b135d3289 (其余不加载)
• https://gyazo.com/441ab76b573569bf45873529c0d9838b (但我的下拉菜单有效)

现在，如果我关闭按钮的点击，模式可以正常工作，但下拉菜单不再有效

• https://gyazo.com/073356ce57049f89722e7715f7ac957e (模态工作)
• https://gyazo.com/58ccc01589f2dbf8e72c44774f025a09 (模态工作)
• https://gyazo.com/261c9d7c1215a255b04b9bb7de6389cd (下拉不起作用)

我在选择，如果我添加代码，一些功能可以工作，一些功能可以工作，反之亦然。这是我的代码，它破坏了我的下拉菜单但修复了我的模式:

function setModalHandler() {

    // unbind all previously-attached events
    $("a[data-target='#globalModal']").unbind();

    // $(document).off('click');
    $(document).on('click', "a[data-target='#globalModal']", function (ev) {
        ev.preventDefault();

        $("#globalModal").modal("show");
        var target = $(this).attr("href");

        $.ajax({
            url: target,
            type: 'GET',


        }).done(function(data)
            {
                $(".modal-content").html($(data).find('.inner_modal'));

                $(".modal-header").prepend('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>');
            }) ;

    });
}

我为多个 gif 表示歉意，我无法制作一个很长的 gif。无论如何，我想做的是只删除模式的点击，而不是破坏我的下拉菜单

我的模态按钮是这样的:

<a href="http://google.com" data-toggle="modal" data-target="#globalModal" class="btn btn-default btn-xs tt"><i class="fa fa-pencil"></i></a>

Fiddle(出于某种原因说模态不是函数)https://jsfiddle.net/v8xnbppw/3/

更新:我已经在模态中创建了一个只包含我想要的代码的页面，并且我上面的代码正在运行，但是当我在模态中有一个完整的网页并使用查找 div 并创建包含该内容的模态时，不知何故破坏了我的脚本...这就是原因。我怎样才能阻止这种情况发生？是这段代码:

$(document).on('click', "a[data-target='#globalModal']", function (ev) {
    ev.preventDefault();

    $("#globalModal").modal("show");
    var target = $(this).attr("href");

    $.ajax({
        url: target,
        type: 'GET',


    }).done(function(data)
        {
            $(".modal-content").html($(data).find('.inner_modal'));

            $(".modal-header").prepend('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>');
        }) ;

});

Answer 1

我认为没有理由删除事件并重新附加它。试试这个:

// call this function once
function setModalHandler() {
  $(".modal-header").prepend('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>');
  $(document).on('click', "a[data-target='#globalModal']", function (ev) {
      ev.preventDefault();

      $("#globalModal").modal("show");
      var target = $(this).attr("href");

      $.ajax({
        url: target,
        type: 'GET',
        success: function (data) {
            $(".modal-content").empty().append($(data).find('.inner_modal'));
        }
    });

  });
}

顺便说一句，它将始终加载相同的数据，因为目标在您提供的代码中的任何地方都没有改变