我正在尝试构建一个表单,用户可以通过单击“添加选项”按钮来添加文本字段。他们还可以通过Jquery动态创建的“删除选项”链接以及文本字段删除添加的字段。
JavaScript的:
$(document).ready(function(){
$("#add_option").click(function()
{
var form = $("form");
var input_field = '<input type="text" />';
var delete_link = '<a href="#">remove</a>';
form.append(input_field + delete_link);
return false;
});
$("a").click(function()
{
alert('clicked');
return false;
});
});
当我点击“add_option”按钮时,会出现一个新的文本字段和“delete_link”。但是当点击JQuery创建的“delete_link”时,浏览器会跟踪链接而不是启动显示“clicked”的弹出窗口。
如何使用JQuery动态创建dom元素后隐藏dom元素?
答案 0 :(得分:6)
我使用委托,因为它使用较少的冒泡:
$(document).delegate("a", "click", function(){
alert('clicked');
});
编辑,这是您需要更改的代码:
$(document).ready(function(){
$("#add_option").click(function(){
var form = $("form");
var input_field = '<input type="text" />';
input_field.addClass = "dynamic-texfield";
var delete_link = '<a href="#" class="delete-trigger">remove</a>';
form.append(input_field + delete_link);
return false;
});
然后是委托部分:
$(document).delegate(".delete-trigger", "click", function(){
alert('ready to delete textfield with class' + $(".dynamic-texfield").attr("class"));
});
答案 1 :(得分:0)
尝试使用“live”
绑定<a>
的处理程序
$('a').live('click', function() { alert("clicked); });
您可能应该将这些<a>
链接限定为类或类别。
答案 2 :(得分:0)
我不明白为什么你使用<a>
作为按钮来执行jQuery中的函数。您可以在框架中拥有所需的所有工具,以完全绕过陈旧的HTML传统。
只需在想要显示的按钮上添加一个css cursor:pointer
定义“可点击”,如果这是你想要的话,添加一些文字装饰,然后用jQ定义你的功能:
$('.remove-button').live('click', function() {
$(this).parent().remove();
}