Question

我在我的网站上创建了一个简单的微调器，但它没有用于鼠标点击美容是通过键盘使用微调器正在工作不知道为什么它不能通过鼠标点击我没有＆＃39;我知道是什么导致了这个问题吗？

我附上了下面的代码我没有附上整个代码我只附加了微调代码，请看下面的

me(".items_container .item_spinner").click(function() { 
    var count = me(".droppable .item_spinner").length;       
    var count = count + 1;
    var step = me(".step").val();   
    var li_div = '<li class="item_spinner" id="item_spinner_'+count+'">';
    li_div += '<label class="spin_' + count + '"><b>Spinner</b></label><input type="text" id="spinner-3_' + count + '" value="0" />';
    li_div += '<input type="button" class="edit" id="editspinner_' + count + '" value="Edit">';
    li_div += '<a href="javascript:(void);" class="removeclass" style=""></a>';
    li_div += '<div class="editspinnerrange_' + count + '" style="display:none;">';
    li_div += '<label>Field Label</label><input type="text" name="spinner_title"  class="spinner_label_' + count + '">';
    li_div += '<label>Min Range Value</label><input type="text" name="minrange" class="minchange_' + count + '">';
    li_div += '<span class="minranges_' + count + '" style="display:none;">-1000</span>';
    li_div += '<label>Max Range Value</label><input type="text" name="maxrange" class="maxchange_' + count + '">';
    li_div += '<span class="maxranges_' + count + '" style="display:none;">1000</span>';
    li_div += '<label>Step Increase</label><input type="text" name="step"  class="step_' + count + '"><span class="stepchange_' + count + '" style="display:none;">1</span></div><div class="spinneroptionbox_' + count + '" style="display:none;"><span class="req">Make this field as required <input class="spinneroption_' + count + '" type="checkbox" name="required" ></span></div></li>';
    me('.droppable').append(li_div); 
    me(document).on('keyup', '.spinner_label_' + count, function() {
        me('.spinner_label_'+count).val(me(this).val());
        me('.spin_' + count).html('<b>' + me(this).val() + '</b>'); 
    }); 
    me(document).on('keyup', '.maxchange_' + count, function() {
        this.value = this.value.replace(/[^0-9]/g, '');
        var newmax = me('.maxchange_' + count).val();
        me('.maxranges_' + count).text(newmax);
        var newmin = me('.minhange_' + count).val();
        me('.minranges_' + count).text(newmin);
        me('#spinner-3_' + count).spinner({ 
            step: me('.stepchange_' + count).text(), 
            min: me('.minranges_' + count).text(), 
            max: me('.maxranges_' + count).text(),
        });
    });  
    me(document).on('keyup', '.minchange_' + count, function() {
        this.value = this.value.replace(/[^0-9]/g, '');
        var newmin = me('.minchange_' + count).val();
        me('.minranges_' + count).text(newmin);
        me('#spinner-3_' + count).spinner({
            step: me('.stepchange_' + count).text(), 
            min: me('.minranges_' + count).text(), 
            max: me('.maxranges_' + count).text(),
        }); 
    });  
    me(document).on('keyup', '.step_' + count, function() {
        this.value = this.value.replace(/[^0-9]/g, '');
        var newstep = me('.step_' + count).val();
        me('.stepchange_' + count).text(newstep);
        me('#spinner-3_' + count).spinner({
            step: me('.stepchange_' + count).text(), 
            min: me('.minranges_' + count).text(), 
            max: me('.maxranges_' + count).text(),
        });
    }); 
    me('#spinner-3_' + count).spinner({
        step: me('.stepchange_' + count).text(), 
        min: me('.minranges_' + count).text(), 
        max: me('.maxranges_' + count).text(),
    }); 
    me('#editspinner_' + count).click(function() {
        $data = me(this).parent().attr('id');
        me('.spinneroption_' + count).attr('data-curr', $data);
        me('.editspinnerrange_' + count).slideToggle("milliseconds");
        me('.spinneroptionbox_' + count).slideToggle("milliseconds");
    }); 
    me('.spinneroption_' + count).live('change', function() {
        if (this.checked) {
            $curr = me(this).attr('data-curr');
            me('#' + $curr + ' label').eq(0).after('<span class="required">*</span>');
        } else {
            me(this).parents('li').children('.required').remove();          
        }
    });     
});

HTML：

<div id="item_spinner" class="item_spinner ui-widget-content">
    <a href="#" class="spipop">
        <input type="button" value="Spinner">
    </a>
</div>

Answer 1

click事件无效的原因是因为html dom是动态生成的，需要作为委托事件处理。

这应该可以解决您的问题

Jquery代码：

      me(document).on('click','#editspinner_'+count,function() {
        $data = me(this).parent().attr('id');
        me('.spinneroption_'+count).attr('data-curr', $data);
        me( '.editspinnerrange_'+count).slideToggle( "milliseconds" );
        me( '.spinneroptionbox_'+count).slideToggle( "milliseconds" );
     });

<强> REF： http://api.jquery.com/on/

快乐编码：）

Spinner不会点击咔嗒声

1 个答案: