[英]jquery.click(function) wordpress widget
when i use this function in my header, it works fine but when i use it in a widget nothing happens 当我在标题中使用此函数时,它可以正常工作,但是当我在小部件中使用它时,什么也没发生
$("#myID").click(function(){
var name = $("#name").val();
var phone = $("#phone").val();
console.log(name +" "+ phone);
if(name.length > 1 && phone.length > 7){
$.ajax({
url: 'my_url',
type: 'post',
data: {'name': name,
'number': phone},
success: function(data){
$(".header-bg-title").html('thanks');
$("span.white").hide();
},
error: function(response){
alert('error');
}
});
} else {
$("p#onerror").html('write your name & number');
}
});
html HTML
<div class="col-xs-12">
<h2>text</h2>
<p id="onerror">My text</p>
<p><input id="name" class="form-control" type="text" placeholder="Name" /></p>
<p><input id="phone" class="form-control" type="text" placeholder="Phone" /></p>
<p><button id="myID" class="btn btn-warning btn-block btn-lg" type="button">Send</button></p>
</div>
anyone who got a suggestion? 任何有建议的人吗?
As far as I am aware .click will attach to the item when it is executed, if the item is not there, in the case of a widget it will not be attached. 据我所知,.click将在执行时附加到该项目,如果该项目不存在,则在小部件的情况下将不会附加。 I could be wrong on that, try this and see if it works.
我对此可能是错的,请尝试一下并查看是否可行。
$('body').on('click', '#myID', function() {
...
});
Try to use jQuery function, not $. 尝试使用jQuery函数,而不是$。
Your code would be this: 您的代码是这样的:
jQuery("#myID").click(function(){
var name = jQuery("#name").val();
var phone = jQuery("#phone").val();
console.log(name +" "+ phone);
if(name.length > 1 && phone.length > 7){
jQuery.ajax({
url: 'my_url',
type: 'post',
data: {'name': name,
'number': phone},
success: function(data){
jQuery(".header-bg-title").html('thanks');
jQuery("span.white").hide();
},
error: function(response){
alert('error');
}
});
} else {
jQuery("p#onerror").html('write your name & number');
}
});
or you can wrap your code in an IIFE receiving jQuery in your $ 或者,您也可以将代码包装在IIFE中,以美元接收jQuery
(function($) {
// your code here
}(jQuery));
I guess you currently have a function like this 我猜你目前有这样的功能
$(document)ready(function(){
$("#myID").click(function(){
var name = $("#name").val();
var phone = $("#phone").val();
console.log(name +" "+ phone);
if(name.length > 1 && phone.length > 7){
$.ajax({
url: 'my_url',
type: 'post',
data: {'name': name,
'number': phone},
success: function(data){
$(".header-bg-title").html('thanks');
$("span.white").hide();
},
error: function(response){
alert('error');
}
});
} else {
$("p#onerror").html('write your name & number');
}
});
}
If so it should be as easy as changing the $(document)ready(function(){ to jQuery(document).ready(function($) and keeping the rest the same. 如果是这样,那应该就像将$(document)ready(function(){更改为jQuery(document).ready(function($))并保持其余部分一样简单。
jQuery(document).ready(function($)
{
$("#myID").click(function(){
var name = $("#name").val();
var phone = $("#phone").val();
console.log(name +" "+ phone);
if(name.length > 1 && phone.length > 7){
$.ajax({
url: 'my_url',
type: 'post',
data: {'name': name,
'number': phone},
success: function(data){
$(".header-bg-title").html('thanks');
$("span.white").hide();
},
error: function(response){
alert('error');
}
});
} else {
$("p#onerror").html('write your name & number');
}
});
}
This solution allows you to keep using $('#idofitem') 该解决方案使您可以继续使用$('#idofitem')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.