jquery追加样式和函数

我追加一些ID的按钮，我用这些ID做点击的东西当它追加没有采取按钮（）效果并点击它不采取的功能，我创建它的这个按钮的IDjquery追加样式和函数

$("button#edit-doc").each(function() { 
    $(this).button(); 
    $(this).on("click", function(){ 
     alert("clicked"); 
    }); 
});

追加按钮

$("#append").on("click", function(){ 
    $('div#container').append("<button id='edit-doc'> Edit </button>"); 
});

容器

<div id="container"></div>

来源

2013-07-10 Ahmed Miro

'$（ “＃键编辑文档”）each' - 你有相同ID的多个元素。？你不应该使用类来代替。 – bfavaretto

这似乎是你追求的：

function handler() { alert('clicked'); } 

$("#append").on("click", appendButton); 

function appendButton(){ 
    $('#container').append(function() { 
     return $("<button id='edit-doc'> Edit </button>").on("click", handler); 
    }) 
}

http://jsfiddle.net/PF8xY/

关于此问题的更多信息，请参阅jQuery how to bind onclick event to dynamically added HTML element。

来源

2013-07-10 19:35:07 Sparko

$(document).on("click", "#selector", function(){ 
    //Your code here. 
});

使用文档，以供selector与.on将允许你绑定事件动态创建的元素。这是我发现在执行之前DOM元素不存在的唯一方法。

我在动态创建的表中进行分类并且效果很好。

编辑：

这里是一个例子。点击该按钮添加div，然后点击div以获取其内容。

http://jsfiddle.net/FEzcC/1/

来源

2013-07-10 19:39:15 defaultNINJA

第一个代码块附加一个事件监听与类=“编辑文档”所有的按钮，使用类，而不是因为一个id的名字一个ID只能每页出现一次。所以我说，当你的浏览器到达这个代码时，事件列表程序将被添加到文档中所有可用的按钮上。它不会将事件列表添加到您将在稍后单击某个元素时添加的按钮，因为它不知道。您将不得不再次为您追加的按钮重新执行代码。但你不想要的是添加一个新的事件列表到原始按钮，导致两个事件被调用。

喜欢的东西：

// Load all buttons with class=edit-doc and add event listner 
$(function() { 
    $("button.edit-doc").button().on("click", function(){ 
     alert("clicked"); 
    }); 
}); 

// Append button if button with id=append is clicked 
$("#append").on("click", function(){ 
    var button = $.parseHTML("<button class='edit-doc'>Edit</button>"); 
    $('div#container').append(button); 
    $(button).button().on("click", function(){ 
     alert("clicked"); 
    }); 
});

工作例如：

http://jsfiddle.net/RC9Vg/

来源

2013-07-10 19:56:24 sam

jquery追加样式和函数

回答

相关问题