目前我已经创建了一个按钮:
<td><button class='ajax_button' data-id='4'>Reserve</button></td>
我也有一个javascript部分在同一文件:
$(".ajax_button").click(function(){
var temp = $(this).data("id");
alert(temp);
});
问题是当我点击按钮,警报弹出不显示。我能做错什么吗?
另外,我注意到在javascript中....前面有不同的符号(#事情).click美元$ (,) .click
"#"answers"。"有什么区别?"
传递给$()
的值是一个CSS选择器。jQuery使用它们来尝试查找页面上的元素。在这种情况下,它可能找不到按钮,这可能是由于调用$()
时元素不存在造成的。
你可能太早执行了javascript调用。如果你要求jQuery选择所有带有'ajax_button'类的元素,但是一个都不存在,那么它显然不能为任何东西添加onclick处理程序。解决这个问题的一种方法是等待整个页面加载完成。之后,添加click事件:
$(document).ready(function() { // When the document is ready (DOM loaded)
$(".ajax_button").click(function(){
var temp = $(this).data("id");
alert(temp);
});
});
您可以为document
的ready
事件添加多个事件处理程序,就像您可以在一个元素上添加多个click
事件一样。
我在文件中有属于ajax函数的javascript。我将javascript文件移动到正确的文件。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Handling search results
$('.ajax_button').click(function(e){
// Get the name of the user clicked
var lastName = $(this).data("lastName");
var firstName = $(this).data("firstName");
var phoneNum = $(this).data("phone");
//alert('lastName'.value()' '.'firstName'.' '.'phoneNum');
alert('hello');
});
});
</script>
"#"answers"。"有什么区别?"
'#'用于选择具有特定id的HTML对象,例如:
$('#container')
将与
匹配<div id="container"></div>
和"。'是具有特定类的HTML对象的选择器。如:
$('.button')
将与
匹配<a class="button"></a>
<div class="button"></div>
如果你的按钮是使用javascript或ajax创建的,jquery的click
事件函数不会附加到元素上,使用live
事件函数,例如:
$('.ajax_button').live('click', function () {
var temp = $(this).attr("data-id");
alert(temp);
});