首页 > js怎么操作动态添加的元素

js怎么操作动态添加的元素

例如弹出窗口,内容是ajax添加的,我想弹出窗口后隐藏内容的一部分,怎么做?除了用延时函数有什么好方法吗


1)提交Ajax请求后,popup loading dialog,提示用户正在处理加载数据
2)等ajax请求完成后,关闭loading dialog,(hide()方法)同时在$('body').append('dialog html文本');
3) 对你想要隐藏的内容设置其css的display属性为none即可


有三种方式:
1.把你要操作的逻辑放在ajax request成功后的回调函数里面。
2.用委托。如jquery的$(selector).on(event, 'subSelector', func)
3.用同步请求(不建议用这种)


<div id="myinput">
        <label class="mylabel"><input type="text" name="test[]" value="">测试</label>
    </div>
    <button onclick="clickAdd();">点击添加</button>
    <script>

        function clickAdd(){
            var myCloneObj=$(".mylabel:first").clone();
            myCloneObj.css("border","1px red solid");
            myCloneObj.find("input").val("123");
            $("#myinput").append(myCloneObj);

        }
    </script>

将你要添加的元素先隐藏不显示,然后再要添加的时候克隆该元素,并改变他的属性


自己曾经写过的动态添加输入框:

javascriptfunction createItemInput(){
    input_item = 'item' + inputCount;
    input_price = 'price' + inputCount;
    var str_select = 'select' + inputCount;

    var li =  '<li>';
          li +=   '<input type="text" name="' + input_item + '">';
          li +=   '<input type="number" name="' + input_price + '">';
          li +=   '<select name="' + str_select +'">';
          li +=      '<option value="basic">基本食物</option>';
          li +=      '<option value="fruit">水果零食</option>';
          li +=      '<option value="consumable">低值易耗品</option>';
          li +=      '<option value="clothes">服装</option>';
          li +=      '<option value="fast">快餐</option>';
          li +=      '<option value="feast">大餐</option>';
          li +=      '<option value="amusement">娱乐</option>';
          li +=      '<option value="work">工作</option>';
          li +=      '<option value="traffic">交通费</option>';
          li +=      '<option value="assets">固定资产</option>';
          li +=      '<option value="other">其他</option>';
        li += '</li>';
    $("#item_list").append(li);
    inputCount++;

}

在调用createItemInput()后添加委托到它的父元素,我这里选择是ul=($"ul")

javascriptul.delegate("input:last","focus", function () {
        createItemInput();
    });

可以参考以上


委托绑定啊,动态添加完成之后立马处理啊。


jquery的话,可以用 live 或者 bind 方法


新生成的元素用 delegate 和 on 都可以的!而 live 和 bind 只能绑定页面载入时已有元素!

【热门文章】
【热门文章】