html - 如何在动态创建的输入标签中获取跨度标签的 html

Question

<span class="edt">ddddd</span>
    <span class="edt">ssss</span>
    <span class="edt">aaaaa</span>
    <a id="edit">edit</a>


    $('#edit').click(function(){

       $('.edt').html("<input type=\"text\" id=\"\"  value=\"\" /> ") 
    });

我想要做的是在 jquery 创建的输入中获取 span 标签的 html 部分。我知道更好的解决方案是在变量中通过 id 传递 html，但 span 标签是在页面加载时动态创建的。

Answer 1

这将循环遍历每个edt类，并将 span 的内容替换为与要替换的内容具有相同值的 input 元素。

$('#edit').click(function(){
    $('.edt').each(function() {
        var value = $(this).text();
        $(this).html('<input type="text" id="" value="'+value+'" />');
    });
});

Answer 2

如果#edit元素是动态创建的，您应该委托该事件。

$(document).on('click', '#edit', function(){
   $('span').html(function(index, oldHTML){
       return '<input type="text" id="id'+ index +'"  value="'+ oldHTML +'" />';
   })
});

http://jsfiddle.net/yHbsa/

看来您想编辑元素的内容，一些建议：

1. Focus在输入上（以编程方式）和在blur事件上用它们的值替换输入。
2. 如果应执行一次处理程序，请使用one方法而不是on.
3. 如果您使用的是 HTML5 文档类型，您也可以使用contenteditable属性而不是替换元素。

Answer 3

这是你想要达到的目标吗？演示

单击生成的一些输入元素以查看绑定事件。

$('#content').on("click", "#edit", function () {
    $.each($('.edt'), function (i, k) {
        $(k).removeClass("edt");
        k.innerHTML = "<input type='text' id='' value='" + k.innerHTML + "' />";
    });
});

$('#content').on("click", "input", function () {
    alert("Some event.");
});