通过动态创建的按钮获取动态文本字段的ID

Question

见下面的代码。我正在动态创建两个文本字段。在其中一个文本字段中，还创建了2个按钮。单击这些按钮中的任何一个时，如何获取没有按钮的文本字段的ID？

<button type="button" id="tfButton">Add text</button>
<div id="InputsWrapper"></div>
<div id="OuterWrapper"></div>

$(document).ready(function() {
    var tfCont = 0;
    var InputsWrapper = $("#InputsWrapper");
    var x = InputsWrapper.length; 
    var namefield = $("#tfButton");

    $(namefield).click(function() {
        tfCont++;

        $(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + tfCont + '">' + '<input type="textarea" id="field_' + tfCont + '" class="fTypex" placeholder="Thought of the day..." data-tfcount="' + tfCont + '"/><button type="button" runclass0">Run</button><button type="button" class="removeclass0">Next</button>' + '<br>' + '</div>' + '</div>');

         $("#OuterWrapper").append('<div id="textLayer_' + tfCont + '">' + '<input type="textarea" id="tf_' + tfCont + '" data-tfcount="' + tfCont + '">' + '</div>');

        x++;
        return false;
    });

    $(document).on("click blur keyup", "input.fTypex", function() {
        var tfc = $(this).data("tfcount");
        $("#tf_" + tfc).val(this.value);
    });
});

Answer 1

你的意思是这样吗？

我知道我没有使用您的数据属性。但是，有数百万种方法可以重新包含它们，我只是认为最好不要依赖于使用数据找到的多个类似ID来向您展示更简单的方法。无论如何，这对我来说似乎更多的工作和头痛。

jsFiddle: live example

$(function() {
    function createFields(e) {
        var inWrap = $('<div />', { class: 'name-wrapper' }),
            nameWrap = $('<div />', { class: 'name' }).appendTo(inWrap),
            outWrap = $('<div />');

        nameWrap.append(
            $('<input />', { class: 'fTypex', placeholder: 'Thought of the day...', type: 'textarea' }),
            $('<button />', { text: 'Run', type: 'button' }),
            $('<button />', { text: 'Next', type: 'button' })
        );

        outWrap.append(
            $('<input />', { type: 'textarea' })
        );

        $('#InputsWrapper').append(inWrap);
        $('#OuterWrapper').append(outWrap);
    }

    $(document)
        .on('click', '#tfButton', createFields)
        .on('click', '#InputsWrapper button', function(e) {
            var i = $(this).closest('.name-wrapper').index(),
                inp = $('#OuterWrapper input')[i],
                $inp = $(inp);

            console.log(i, inp, $inp);

            //  could use like
            $('.highlight').removeClass('highlight');
            $inp.addClass('highlight');
        })
})

---

如果你坚持你的数据属性和那个奇怪的runclass0 attr和另一个类，那么这里有一个替代小提琴，包括那些小项目。你会发现结构上的变化很小。

Alt jsFiddle

$(function() {
    function createFields(e) {
        var inWrap = $('<div />', { class: 'name-wrapper' }),
            nameWrap = $('<div />', { class: 'name' }).appendTo(inWrap),
            outWrap = $('<div />'),
            iCnt = $('#InputsWrapper .name-wrapper').length + 1;

        nameWrap.append(
            $('<input />', { class: 'fTypex', 'data-tfcount': iCnt, id: 'field_'+iCnt, placeholder: 'Thought of the day...', type: 'textarea' }),
            '<button runclass0 type="button">Run',
            $('<button />', { class: 'removeclass0', text: 'Next', type: 'button' })
        );

        outWrap.append(
            $('<input />', { 'data-tfcount': iCnt, id: 'tf_'+iCnt, type: 'textarea' })
        );

        $('#InputsWrapper').append(inWrap);
        $('#OuterWrapper').append(outWrap);
    }
    $(document)
        .on('click', '#tfButton', createFields)
        .on('click', '#InputsWrapper button', function(e) {
            var i = $(this).closest('.name-wrapper').index(),
                inp = $('#OuterWrapper input')[i],
                $inp = $(inp);

            //  see console for more info: F12 in most of today's browsers
            if (console['log']) console.log(i, inp, $inp);

            //  could use like
            $('.highlight').removeClass('highlight');
            $inp.addClass('highlight');
        })
})