jQuery腳本不適用於從另一頁附加的html

Question

我已經提到了這些答案，但是並不能解決：

添加后jQuery on button單擊不起作用

jQuery click事件在添加方法后不起作用

我想像這樣在頁面加載時加載點擊按鈕的html :(這正確顯示了css的html，但是腳本無法正常工作）

$.get( "/plugins/system/conversekit/conver/test.php", function( data ) {
       $('body').append(data);
    }, "html" );

但是，如果我以這種方式加載html，腳本將起作用：

$('body').append('<div id="ckit" class="layout-compact is-hiddenx"\
     data-ckit-compact style=""><a href="javascript:void(0);"\
      class="btn-toggle-ckit" data-ckit-toggle-on><i class="fa fa-comment-o">\
      </i></a></div><div id="ckit" class="layout-full is-hidden disable-scrolling" data-ckit-full>\
      <iframe src="/plugins/system/conver/conver/full-view-contact.php" data-ckit-iframe id="ckit-full-view" \
      name="ckit-full-view" scrolling="no" frameborder="0"allowtransparency="true" \
      style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; border: 0px; padding: 0px; \
      margin: 0px; float: none; background: none;"></iframe></div>');

腳本：

var toggleCkitOn = $('[data-ckit-toggle-on]');
 toggleCkitOn.on('click', function(e) {
            $(ckitFull).removeClass("is-hidden");
            $(ckitCompact).addClass("is-hidden");
            $('body').addClass("disable-scrolling");
            $("html").css({"height": "100%", "overflow": "hidden"});
            $("body").css({"position": "relative"});
            e.preventDefault();
        });

HTML

<div id="ckit" class="layout-compact is-hiddenx" data-ckit-compact style="">
    <a href="javascript:void(0);" class="btn-toggle-ckit" data-ckit-toggle-on><i class="fa fa-comment-o"></i></a>
</div>

<div id="ckit" class="layout-full is-hidden disable-scrolling" data-ckit-full>
    <iframe src="conver/full-view-contact.php" data-ckit-iframe id="ckit-full-view" name="ckit-full-view" scrolling="no" frameborder="0" allowtransparency="true" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; border: 0px; padding: 0px; margin: 0px; float: none; background: none;"></iframe>
</div>

我試圖避開代表團，但無濟於事，

$('body').on('click',toggleCkitOn, function(e) {...});

嘗試與其他承諾一起檢查ajax是否正確運行，並且我得到以下所有內容而沒有錯誤執行：

1）成功2）第二次成功3）完成

 var jqxhr = $.get( "/plugins/system/conversekit/conversekit/test.php", function() {
          alert( "success" );
        })
          .done(function() {
            alert( "second success" );
          })
          .fail(function() {
            alert( "error" );
          })
          .always(function() {
            alert( "finished" );
          });

可行的答案（但我希望變量為全局范圍，在此函數之外聲明它們會使單擊不起作用）：

$("body").on("click", ".btn-toggle-ckit", function(e) { 
            var toggleCkitOn = $('[data-ckit-toggle-on]');
            var ckitFull = $('[data-ckit-full]');
            var ckitCompact = $('[data-ckit-compact]');
            var ckitIframe = $('[data-ckit-iframe]');
             $(ckitFull).removeClass("is-hidden");
             $(ckitCompact).addClass("is-hidden");
             $('body').addClass("disable-scrolling");
             $("html").css({"height": "100%", "overflow": "hidden"});
             $("body").css({"position": "relative"});
             e.preventDefault();
        } );

Answer 1

function ckitDelegate() {
var toggleCkitOn = $('[data-ckit-toggle-on]');
 toggleCkitOn.on('click', function(e) {
            $(ckitFull).removeClass("is-hidden");
            $(ckitCompact).addClass("is-hidden");
            $('body').addClass("disable-scrolling");
            $("html").css({"height": "100%", "overflow": "hidden"});
            $("body").css({"position": "relative"});
            e.preventDefault();
        });
};

$.get("/plugins/system/conversekit/conver/test.php", function( data ) {
       $('body').append(data);
       ckitDelegate();
}, "html").fail(function() {
alert( "error" );
});

這是我最后的意見 ，如果它也無法工作，我將放棄：

$.get("/plugins/system/conversekit/conver/test.php", function( data ) {
  $('body').append(data);
  setTimeout(function(){ ckitDelegate(); }, 500);
}, "html");

Answer 2

請嘗試這個。 在一個函數中添加click事件，並在DOM加載時以及在追加操作之后調用該函數。 像這樣：

  function Init(){
 toggleCkitOn.on('click', function(e) {});
}

$(document).ready(function(){
Init();
});

$.get( "/plugins/system/conversekit/conver/test.php", function( data ) {
       $('body').append(data);
    Init();
    }, "html" );

只需確保在調用它們之前定義了Init（）

Answer 3

您的問題是iframe隱藏了$（'[data-ckit-toggle-on]'），因此阻止了任何點擊事件-即未觸發點擊事件，因為您是在單擊iframe而不是a href。

如果您刪除iframe（暫時-一次解決一個問題），然后重試，則至少應觸發click事件。

右鍵單擊DOM中的$（'[data-ckit-toggle-on]'）元素，然后單擊“檢查元素”以查看它是否可見。

編輯

嘗試這個：

$.get("plugins/system/conversekit/conver/test.php",
    function(data) { $('body').append(data); },
        "html").then(function(data) {
        var toggleCkitOn = $('[data-ckit-toggle-on]');
        var ckitFull = $('[data-ckit-full]');
        var ckitCompact = $('[data-ckit-compact]');
        var ckitIframe = $('[data-ckit-iframe]');

        $("body").on("click", ".btn-toggle-ckit", function(e) { 
            alert("hi");
             $(ckitFull).removeClass("is-hidden");
             $(ckitCompact).addClass("is-hidden");
             $('body').addClass("disable-scrolling");
             $("html").css({"height": "100%", "overflow": "hidden"});
             $("body").css({"position": "relative"});
             e.preventDefault();
        });
    });

如果您仍然無法點擊a href，請嘗試在不覆蓋a href的iframe中添加css邊距頂部。 讓我知道。

Answer 4

如果您的html動態創建了那段時間，則應綁定click方法。

附加html后編寫此代碼。

例子：-

$('#buttonOuter').append('<input type="button" id="myid"/>');

$("#myid").unbind();
if($("#myid").length > 0 && $._data( $("#myid")[0], "events" )==undefined){
    $('#myid').bind('click',function(){
        // write your code
    });
}

我認為這對你有用