带有按钮和动态元素的内联可编辑答案

【问题标题】：Inline editable with button and dynamic elements带有按钮和动态元素的内联可编辑
【发布时间】：2016-06-22 19:38:01
【问题描述】：

我想使用带有按钮的内联 x-editable。

如果我将它与修复选择器一起使用，例如：

$('#publicname-change').editable({

工作正常。

但我有元素和id，它们来自数据库，我不能说我有多少id和名字。

我现在使用一个按钮。如果我点击这个按钮（就像在示例中一样），那么我也会从这个字段中获得我需要的 id。

如果可能的话，我可以使用 $('#'+myselectorId).editable({

如果 DOM 加载正常，那么我可以找到所有的 id

如果我点击按钮，那么我可以从该可编辑字段中获取我需要的 ID。

正常我必须修复选择器，例如：

 $('#username').editable({
    type: 'text',
    pk: 1,
    url: '/post',
    title: 'Enter username'
   });

我正在寻找一种方法，通过单击按钮并使用动态 id（选择器）来调用它，如下所示：

$('#'+myselectorId).editable({
    type: 'text',
    pk: 1,
    url: '/post',
    title: 'Enter username'
});

最好的问候。

于尔根

【问题讨论】：

标签： jquery x-editable

【解决方案1】：

在您寻找输入后可能会起作用：

var inputObj=[];
$("input").each(function(index){
    thisID=$(this).attr("id");
    thisNAME=$(this).attr("name");
    inputObj[index]={"thisID":thisID,"thisNAME":thisNAME};
    console.log("thisID: "+thisID+", thisNAME: "+thisNAME);
});

var inputTotal="";
for(i=0;i<inputObj.length;i++){
    inputTotal += JSON.stringify(inputObj[i]);
}
console.log(inputTotal);

在您的所有页面中运行它。
Console.log 可能就足够了。

它给出了这样的结果：

其他很酷的东西是这个软件：Agent Ransack 完全免费 并且非常有用在大型网络开发文件夹s 中通过关键字搜索文件标题和文件内容 + 正则表达式.

必须的！

;)

【讨论】：

【解决方案2】：

首先，感谢您的帮助和回答。

也许我先描述的问题不正确...

我想使用 jquery x-editable 插件.... 在我的测试网站上，这个插件可以正常工作...但是现在我加载了一个动态的一面...它们包括一些标签...标签的数量取决于数据库中有多少标签...

我希望代码能让你更清楚地理解......

     <?php


     echo '<ul class="nav nav-tabs navSub">';
   while($row       = mysqli_fetch_object($result_4)){
    $active = "";
    if ($row->active ==1){
        $active = "active";
    }
    echo '<li class="'.$active.'" id="'.$row->liBoxId.'" 
     typeGroup="'.$row->typeGroupId.'">';
    echo '<a href="#"'.$row->divBoxId.'" class="editable shortDesc"   name="shortDesc" id="'.$row->editableid.'" onclick="request(7,1,1, 1, 0,0, '.$row->typeGroupId.')" data-toggle="tab">';
         echo ''.$row->tabTitle.'';
          echo '<span class="badge badge-success">&nbsp;</span>';
         echo '</a>';
    echo '</li>';
};

        echo '<button type="button" id="editTitle" class="btn btn-white btn-info">';
        echo '<i class="blue ace-icon fa fa-pencil  center bigger-110"></i>';
       echo '</button>';
       echo '</ul>';

      ?>

     <script>

           $( document ).ready(function() {
           $('.shortDesc').each(function() {
           $('#'+this.id+'').editable('disable', true);
             });
       });



           jQuery(function($) {

            $.fn.editable.defaults.mode = 'inline';
            $.fn.editableform.loading = "<div class='editableform-loading'><i class='ace-icon fa fa-spinner fa-spin fa-2x light-blue'></i></div>";
            $.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="ace-icon fa fa-check"></i></button>'+
                                        '<button type="button" class="btn editable-cancel"><i class="ace-icon fa fa-times"></i></button>'; 



         }

           $('#editTitle').click(function(e){  
                var id = $("ul.navSub li.active").attr('id');               
                id = "editable-"+id;
                e.stopPropagation();
                $('#'+id+'').editable('enable', true);
                //$('#publicname-change').editable('toggle');
        },
        $('#'+id+'')
            .editable({
                type: 'text',
                name: 'shortDesc',
                data: {oper:'editDetail'},
                url: 'incl/asedScripts/ased_updateTitle.php',
                success: function(data,response, newValue) {
                    if(response.status == 'error') return response.msg;

                }
         });    
     );
     </script>

我不确定是否可以使用我从 jquery 调用中获得的 id 进行编辑......

$('#'+id+'')
            .editable({

最好的问候和感谢您的帮助

于尔根

【讨论】：