Question

我试图在单击自定义删除按钮后从dinamycally中删除OPTION元素中的“disabled”属性，它工作正常，但是当我尝试再次选择该元素时，没有可用的更改事件。

SELECT＃validator有一个on（“change”）事件，它创建一个新的HTML块并将其附加到DIV＃selectedValidators，这也可以正常工作。

<select id="validators">
  <option value="op1">Op1</option>
  <option value="op2" disabled="disabled">Op2</option>
  <option value="op3">Op3</option>
  <option value="op4" disabled="disabled">Op4</option>
</select>

// select on change code
var validatorsSelected = [];

jQuery('#validators').on(
    'change', 
    function(){
        var thisObj = jQuery(this);
        var value = jQuery(this).val();
        var html = [
        '<div class="validator-option">',
            '<span class="label label-default" style="font-size:14px">', 
                '<input readonly name="validator[]" value="'+value+'">',
                '<a href="javascript:void(0);" onClick="removeValidator(this);" data-value="'+value+'>x</a>',
            '</span>',
        '</div>'
        ].join("");

        if(jQuery.inArray(value, validatorsSelected) == -1) {
            validatorsSelected.push(value);
            jQuery('#selectedValidators').append(html);
            jQuery(thisObj).removeProp('selected');
            jQuery(thisObj).find('option[value="0"]').prop('selected', 'selected');
            jQuery(thisObj).find('option[value="'+value+'"]').prop('disabled', 'disabled');   
        } 
    }
);

创建后，用户可以将其删除。删除后，应通过click（ed）事件中A元素的data-value属性从相关的OPTION元素目标中删除disabled属性。

<div id="selectedValidators">
    <div class="validator-option">
        <span class="label label-default" style="font-size:14px"> 
            <input readonly name="validator[]" value="opt2">
            <a href="javascript:void(0);" onClick="removeValidator(this);" data-value="opt2">x</a>
        </span>
    </div>
    <div class="validator-option">
        <span class="label label-default" style="font-size:14px"> 
            <input readonly name="validator[]" value="opt4">
            <a href="javascript:void(0);" onClick="removeValidator(this);" data-value="opt4">x</a>
        </span>
    </div>
</div>

现在，如果我尝试从这里删除它，它会删除所希望的属性，但OPTION没有事件可以处理。

// javascript code
function removeValidator(element)
{
    var value = jQuery(element).data("value");
    jQuery(element).parent().remove();
    jQuery('#validator').find('option[value="'+value+'"]')
    .removeAttr('disabled').bind('change');    
}

删除属性后，OPTION元素不再具有更改事件

0 个答案: