HTML表单点击后需要将子标签从输入更改为不可编辑的内容

Question

我有 HTML 表单：

<div class="party-group party-group_has-items" data-field-name="accessLevels">
        here another HTML being generated when click on that "accessLevels" parent

<div class="form-group"><label class="control-label control-label_main">Department</label>
    <div class="form-group-content">
        <div class="form-field" data-editors="department">
            <div class="form-field_type_string">
                <span class="form-field__editor-wrapper">
                    <input type="text" class="form-field__editor form-field__editor_autosize"/>
                </span>
            </div>
        </div>
    </div>
</div>
</div>

当单击父级“accessLevels”时，我试图将输入标记更改为不可编辑的内容。仅需要对“accessLevels”部分进行更改

目前找到这样的解决方案

    $(document).on('click', 'div[data-field-name="accessLevels"] .form-field__editor', function() {
        $('div[data-field-name="accessLevels"] .form-field__editor').prop('readonly', true);
    });

但是，当我单击父部分时，这种只读更改不会立即发生 当我点击子输入表单内部时就会产生效果

请指教

Answer 1

删除

.form-field__editor 从选择器中。

    $(document).on('click', 'div[data-field-name="accessLevels"]', function() {
    $('div[data-field-name="accessLevels"] .form-field__editor').prop('readonly', true);
});