当我在头中使用此函数时,它运行良好,但当我在小部件中使用它时,不会发生任何事情
$("#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
<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>
有人有什么建议吗?
据我所知,click在执行项目时会附加到项目上,如果项目不在那里,在小部件的情况下,它不会被附加。我可能错了,试试这个,看看它是否有效。
$('body').on('click', '#myID', function() {
...
});
尝试使用jQuery函数,而不是$。
你的代码是这样的:
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');
}
});
或者你可以将你的代码包装在IIFE中,在$中接收jQuery
(function($) {
// your code here
}(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');
}
});
}
如果是这样的话,那么将$(document)ready(function){更改为jQuery(document
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');
}
});
}
此解决方案允许您继续使用$('#idofitem')