Question

我是jquery的新手，无法弄清楚确切的问题。任何帮助将受到高度赞赏。第一次单击按钮元素工作正常。但随后点击任何其他按钮根本不起作用。

我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="det_cont">
    <ul>
        <li>
            <span class="lispan_1">Mobile</span>
            <span class="lispan_2">:</span>
            <span class="lispan_3">
                <input type="text" id="umob" maxlength="20" disabled>
                <span class="lispan_sub" id="mobli">
                    <button class="lispan_4 add" title="Add" id="mobadd">Add</button>
                </span>
            </span>
        </li>
        <li>
            <span class="lispan_1">Date of Birth</span>
            <span class="lispan_2">:</span>
            <span class="lispan_3">
                <input type="text" id="udob" maxlength="11" disabled>
                <span class="lispan_sub" id="dobli">
                    <button class="lispan_4 add" title="Add" id="dobadd">Add</button>
                </span>
            </span>
        </li>
        <li>
            <span class="lispan_1">Gender</span>
            <span class="lispan_2">:</span>
            <span class="lispan_3">
                <input type="text" id="ugen" maxlength="6" disabled>    
                <span class="lispan_sub" id="genli">
                    <button class="lispan_4 add" title="Add" id="genadd">Add</button>
                </span>
            </span>
        </li>
    </ul>
</div>

<script type="text/javascript" src="CNC/js_lib/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
    var othli = new Array();
    othli[1] = $('#mobli').html();
    othli[2] = $('#dobli').html();
    othli[3] = $('#genli').html();
    $('#det_cont .lispan_4').on('click',function() {
        if($(this).hasClass('add')) {
            if(this.id == 'mobadd') {
                $('#umob').prop("disabled",false);
                $('#umob').css({backgroundColor: '#FFFFFF'});
                $('#det_cont input').not('#umob').blur();
                $('#det_cont input').not('#umob').prop("disabled",true);
                $('#det_cont input').not('#umob').css({backgroundColor: 'rgba(0,255,153,0)'});
                $('#umob').focus();
                $('#mobli').html('<button class="lispan_4 sub" title="Submit" id="mobsub">Submit</span>');
                $('#dobli').html(othli[2]); 
                $('#genli').html(othli[3]);
            } else if(this.id == 'dobadd') {
                $('#udob').prop("disabled",false);
                $('#udob').css({backgroundColor: '#FFFFFF'});
                $('#det_cont input').not('#udob').blur();
                $('#det_cont input').not('#udob').prop("disabled",true);
                $('#det_cont input').not('#udob').css({backgroundColor: 'rgba(0,255,153,0)'});
                $('#udob').focus();
                $('#dobli').html('<button class="lispan_4 sub" title="Submit" id="dobsub">Submit</span>');
                $('#mobli').html(othli[1]); 
                $('#genli').html(othli[3]);
            } else if(this.id == 'genadd') {
                $('#ugen').prop("disabled",false);
                $('#ugen').css({backgroundColor: '#FFFFFF'});
                $('#det_cont input').not('#ugen').blur();
                $('#det_cont input').not('#ugen').prop("disabled",true);
                $('#det_cont input').not('#ugen').css({backgroundColor: 'rgba(0,255,153,0)'});
                $('#ugen').focus();
                $('#genli').html('<button class="lispan_4 sub" title="Submit" id="gensub">Submit</span>');
                $('#dobli').html(othli[2]); 
                $('#mobli').html(othli[1]);
            }
        }
    });
});
</script>

</body>
</html>

但是，如果我删除行

$('#dobli').html(othli[2]); 
$('#genli').html(othli[3]);

$('#mobli').html(othli[1]); 
$('#genli').html(othli[3]);

和

$('#dobli').html(othli[2]); 
$('#mobli').html(othli[1]);

从我的代码中，脚本工作正常，但没有达到预期的结果（使用html属性更新按钮）。

除此之外还有其他选择吗？为什么上面的代码不起作用？

我的小提琴：

JSFIDDLE

$（'＃id'）。html（var）不起作用

0 个答案: