jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了动态字段上的jQuery x-editable插件?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我制作了一个脚本,可以在点击按钮时添加动态输入,并使用相应的x按钮删除不需要的输入.我需要在每个新创建的动态输入上添加x-editable插件.我正在使用X-editable,以这种方式,在x-editable弹出窗口中的选定选项上,右侧的输入获得与所选选项对应的值.

我已经使用静态元素进行了这项工作,但是使用动态元素我有很大的问题.
首先,与所有html结构一起,生成所有动态元素的类,其动态字段的类名号.我正在使用配置的Fieldcount执行此操作:var FieldCount = 1;然后在生成HTML代码的部分内容添加类似class =“privacy-dynamic’FieldCount’”的内容.然后第一个动态元素在HTML代码获取名为privacy-dynamic2的类,第二个获取privacy-dynamic3,依此类推.

现在,我的第一个结论是我需要以某种方式为x-editable添加一个类似的选项,其中我将创建一个有相同FieldCount的脚本,因此每个x-editable弹出窗口将对应于其左边的“结果输入”而不是一个弹出窗口所有动态输入.

我尝试以与生成html结构相同的方式生成x-editable脚本,但它没有用.傻傻的尝试,我知道,用脚本生成脚本,但我很绝望.

我真的不知道它是如何解决的,我是一个jquery菜鸟,我迷失了它.它能以某种方式解决吗?

下面是当前情况,其中第一个静态字段具有x-editable working,而动态字段具有相同的x-editable结构但没有脚本:http://jsfiddle.net/dzorz/QxMs7/

HTML:

<div class="container">    
    <input type="text" class="main_activity" id="main_activity" name="main_activity" placeholder="Main activity">
    <div class="parentToDelegate">
        <a href="#" id="privacy" class="privacy" data-type="SELEct" data-pk="1" data-value="1" data-original-@R_673_10283@e="SELEct visibility">public</a>
        <input type="text" id="privacy_result" class="privacy_result" value="1"/>     
    </div>

    <div class="row">
        <div id="InputsWrapper">
        </div>
    </div>
    <div class="row">
        <span id="AddMoreBox" class="btn btn-info pull-right"><i class="icon-plus"></i>Add More</span>
    </div>

脚本:

//x-editable
$('.privacy').editable({
    showbuttons: false,unsavedclass: null,type: 'SELEct',inputclass: 'input-medium privacy-SELEct',source: [
        {value: 1,text: 'public'},{value: 2,text: 'approved contacts only'},{value: 3,text: 'matching contacts'},{value: 4,text: 'invisible'}
    ],});

$(function(){
        $('.parentToDelegate').on('change keyup blur',".privacy-SELEct",function(){
            $('.privacy_result').val($('.privacy-SELEct').val());
        }).blur();
    });

//dynamic fields
$(document).ready(function() {

var MaxInputs       = 5; //maximum input Boxes allowed
var InputsWrapper   = $("#InputsWrapper"); //Input Boxes wrapper ID
var AddButton       = $("#AddMoreBox"); //Add button ID

var x = InputsWrapper.length; //initlal text Box count
var FieldCount=1; //to keep track of text Box added

$(AddButton).click(function (E)  //on add input button click
{
//         if(x <= MaxInputs) //max input Box allowed
//         {
        FieldCount++; //text Box added increment
        //add input Box
        $(InputsWrapper).append('\
        <div>\
        <input type="text" class="other_activity"\
        name="other_activity" id="other_activity"\
        placeholder="Other activity" style="margin:0px 15px 10px 0px"/>\
        <a href="#" class="removeclass"><i class="icon-remove icon-remove-add"></i></a>\
            <div class="parentToDelegate-dynamic'+ FieldCount +' parent-dynamic">\
                <a href="#" id="privacy-dynamic" class="privacy-dynamic'+ FieldCount +'" data-type="SELEct" data-pk="1" data-value="1" data-original-@R_673_10283@e="SELEct visibility">public</a>\
                <input type="text" id="privacy-result-dynamic'+ FieldCount +'" name="privacy-result-dynamic'+ FieldCount +'" class="privacy-result-dynamic'+ FieldCount +' privacy_dynamic" value="1"/>\
            </div>\
        </div>');
        x++; //text Box increment
//         }
return false;
});

$("body").on("click",".removeclass",function(E){ //user click on remove text
    if( x > 1 ) {
            $(this).parent('div').remove(); //remove text Box
            x--; //decrement textBox
    }

            $('.income_count').trigger('change');
            return false;
});

});

CSS:

.container{
   padding-top:100px
}

.privacy_result,.privacy_dynamic{
    width: 40px;
}

.main_activity,.other_activity{
    width: 140px;
}

.parentToDelegate{
    display:inline;
}

.icon-remove-add{
    margin-left: -10px;
    margin-top: -8px;
}

.parent-dynamic{
    display: inline;
    top: -5px;
    left: 10px;
    position: relative;
}

欢迎任何帮助或建议,您可以自由编辑我的jsfiddle并将其发回

解决方法

我找到了一个解决方案,允许.editable在第一次点击时启动.

$(document).on('mousemove',function() {
    $('.username').editable();
    ... and another other fields you need to apply this too.
});

只需应用mousemove事件,因为用户总是必须移动鼠标才能单击该字段.这对我来说很完美.

大佬总结

以上是大佬教程为你收集整理的动态字段上的jQuery x-editable插件?全部内容,希望文章能够帮你解决动态字段上的jQuery x-editable插件?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。