[英]jQuery script not working on html appended from another page
I've already referred to these answers but that doesn't solve: 我已经提到了这些答案,但是并不能解决:
jQuery on button click not working after append 添加后jQuery on button单击不起作用
Jquery click event not working after append method jQuery click事件在添加方法后不起作用
I want to load the html for click button on page load like this:(this shows the html with css correctly, but the script is not working) 我想像这样在页面加载时加载点击按钮的html :(这正确显示了css的html,但是脚本无法正常工作)
$.get( "/plugins/system/conversekit/conver/test.php", function( data ) {
$('body').append(data);
}, "html" );
But if I load the html in this way the script works: 但是,如果我以这种方式加载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>');
SCRIPT: 脚本:
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 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>
I tried to avoid the delegation but doesn't help, 我试图避开代表团,但无济于事,
$('body').on('click',toggleCkitOn, function(e) {...});
Tried with other promises to check if ajax functions correctly, and I get all the below get executed without error: 尝试与其他承诺一起检查ajax是否正确运行,并且我得到以下所有内容而没有错误执行:
1) success 2) second success 3) finished 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" );
});
Working answer (but i want the variables to be global scope, declaring them outside this function makes the click the doesn't work): 可行的答案(但我希望变量为全局范围,在此函数之外声明它们会使单击不起作用):
$("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();
} );
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" );
});
This my last opinion , i will give-up if it not working too: 这是我最后的意见 ,如果它也无法工作,我将放弃:
$.get("/plugins/system/conversekit/conver/test.php", function( data ) {
$('body').append(data);
setTimeout(function(){ ckitDelegate(); }, 500);
}, "html");
please try this. 请尝试这个。 Add click event in one function and call that function on DOM load and after the append operation. 在一个函数中添加click事件,并在DOM加载时以及在追加操作之后调用该函数。 Like this: 像这样:
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" );
Just make sure you have defined the Init() before calling them 只需确保在调用它们之前定义了Init()
Your issue was that the iframe was hiding $('[data-ckit-toggle-on]') and therefore preventing any click events - ie the click events weren't firing because you were clicking the iframe, not the a href. 您的问题是iframe隐藏了$('[data-ckit-toggle-on]'),因此阻止了任何点击事件-即未触发点击事件,因为您是在单击iframe而不是a href。
If you remove the iframe (temporarily - solve one issue at a time), then try again, it should at least fire the click event. 如果您删除iframe(暂时-一次解决一个问题),然后重试,则至少应触发click事件。
Right click on your $('[data-ckit-toggle-on]') element in the DOM then click "Inspect element" to see if it is visible or not. 右键单击DOM中的$('[data-ckit-toggle-on]')元素,然后单击“检查元素”以查看它是否可见。
EDIT 编辑
Try this: 尝试这个:
$.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();
});
});
If you're still having trouble clicking the a href, try adding a css margin-top to the iframe to where it isn't covering the a href. 如果您仍然无法点击a href,请尝试在不覆盖a href的iframe中添加css边距顶部。 Let me know. 让我知道。
If your html create dynamic that time you should bind click method. 如果您的html动态创建了那段时间,则应绑定click方法。
Write this code after appending your html. 附加html后编写此代码。
Example :- 例子:-
$('#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
});
}
I think it's working for you 我认为这对你有用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.