1

我正在创建一个页面，该页面要求用户能够创建输入元素，并且我需要能够根据与它们相关联的事件从这些元素中检索数据。我将它们附加到文档的正文中，并且它们正确附加，但是它们的事件没有触发。

JSFiddle：http: //jsfiddle.net/g7Sdm/2/

基本 HTML：

<input type="radio" class="userInput" value="I'm a radio button that already existed when the page loaded." />Pre-Existing Radio Button
<input type="text" class="userInput userTextInput" value="Text" />
<button type="button" id="addRadio">Add Radio Button</button>
<button type="button" id="addText">Add Text Input</button>

Javascript：

$(document).ready(function() {
    $("#addRadio").click(function() {
           $("html").append("<input type=\"radio\" class=\"userInput\" value=\"I'm a dynamically added radio button!\" />New Radio Button<br />");
    });
    $("#addText").click(function() {
           $("html").append("<input type=\"text\" class=\"userInput userTextInput\" value=\"Text\" /><br />");

    });
    $(".userInput").click(function() {
        alert($(this).val()); 
    });
    $(".userTextInput").keyup(function() {
        alert($(this).val()); 
    });
});

谢谢你的帮助！！现在很晚了，我需要睡觉，但我会在早上回来查看。

4

2 回答 2

3

您必须使用该on()方法，因为元素必须动态绑定

$(document).ready(function() {
    $("#addRadio").click(function() {
           $("html").append("<input type=\"radio\" class=\"userInput\" value=\"I'm a dynamically added radio button!\" />New Radio Button<br />");
    });
    $("#addText").click(function() {
           $("html").append("<input type=\"text\" class=\"userInput userTextInput\" value=\"Text\" /><br />");

    });
    $(document).on("click","userInput",function() {
        alert($(this).val()); 
    });
    $(document).on("click",".userTextInput",function() {    
        alert($(this).val()); 
    });
});

这是演示

于 2013-06-15T06:30:30.257 回答
2

改成：

$(document).on("click", ".userInput", function() {
    alert($(this).val()); 
});

$(document).on("click", ".userTextInput", function() {
    alert($(this).val()); 
});
于 2013-06-15T06:27:32.757 回答