Question

<div id="sandbox">
<p>
    <label> Answer Type</label>
    <select name="ans_type[]">
        <option value="Image">Image</option>
        <option value="Text">Text</option>
    </select>
</p>
<p class="text">
    <label> Enter Answer</label>
    <textarea rows="5" cols="50" name="ans_text[]"></textarea>
</p>
<p class="image">
    <label> Upload Image</label> <br/>
    <input type="file" name="ans_image[]" class="btn"/>
</p>
<p>
    <label> Is Correct Answer</label>
    <input type="checkbox" name="isCorrectAnswer[]"/>
</p>

JS

$('#addButton').click(function() {
        var newHTML = "";
        newHTML += '<p><label> Answer Type</label><select name="ans_type[]"><option value="Image">Image</option><option value="Text">Text</option></select></p><p><label> Enter Answer</label><textarea rows="5" cols="50" name="ans_text[]"></textarea></p><p><label> Upload Image</label> <br/><input type="file" name="ans_image[]" class="btn"/></p>';
        $('#sandbox').html($('#sandbox').html() + newHTML);
    });
    $("input[name*='ans_type']").change(function() {
        alert("asd");
        var answer = $(this).val();
        if (answer == "Image") {
            $(".text").hide();
            $(".image").show();
        } else {
            $(".text").show();
            $(".image").hide();
        }
    });

当我选择ans_type的下拉列表时，更改功能不会触发。问题应该放在输入[name * ='ans_type']＆lt; - 因为当用户单击Add按钮时，将复制输入，所以我应该如何更改它以使效果可用于所有ans_type []下拉列表。

Answer 1

尝试

$("select[name*='ans_type']")

Answer 2

应该是$("select[name*='ans_type']")而不是$("input[name*='ans_type']")，因为您定位select而不是input元素

您还可以使用事件委派来动态添加元素：

$(document).on("change","select[name*='ans_type']", function(){
    alert("asd");
    var text = $(this).closest('#sandbox').find('.text'),
        image = $(this).closest('#sandbox').find('.image'),
        answer = $(this).val();
    if (answer == "Image") {
        text.hide();
        image.show();
    } else {
        text.show();
        image.hide();
    }
})

下拉列表更改无触发器

2 个答案: