如何在动态创建的输入标记中获取span标记的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/

似乎你想编辑元素的内容，一些建议：

输入（编程）和Focus事件上的
1. blur将输入替换为其值。
2. 如果处理程序应执行一次，请使用one方法而不是on。
3. 如果您使用的是HTML5 doctype，则还可以使用contenteditable属性而不是替换元素。

Answer 3

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

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

$('#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.");
});