Question

我正在尝试创建一个内联编辑功能，以便在不同元素上触发不同的操作。

我曾尝试使用其他插件但是还没有能够让他们完全按照我的意愿去做，所以决定尝试创建我自己的插件，同时学习jquery。

我目前遇到的问题是我有一个正确触发span元素的.blur事件，这就是我想要的，但当元素是一个select元素时，我不希望模糊事件发生触发。由于代码低于模糊事件触发器，并且它不是所需的结果。任何人都可以建议我如何只触发span元素上的blur（）事件而不是其他任何东西

＆＃13;

$('.inlineEdit-jmc').inlineEditJmc({
    fieldsArray: {
        table-column1: 'field-table-column1',
        table-column2: 'field-table-column2'
        }
});

(function ( $ ) {
    $.fn.inlineEditJmc = function(options) {
        //Set Default Settings
            console.log(options);
            var settings = $.extend({
            'pk': null,
            'table': null,
            'field': null,
            'url': null,
            'type':  null,
            'fieldsArray': null
        },options)
        if(settings.fieldsArray == null){}else{
            var fields = new Array();
        }
        
        function load_settings(this_selected){
            settings['pk'] = this_selected.attr("data-pk"); // pk of table to be updated
            settings['table'] = this_selected.attr("data-table"); // table name of table to be updated
            settings['field'] = this_selected.attr("data-field"); // name of the field in the table being updated
            settings['url'] = this_selected.attr("data-url"); // url for the ajax call to be sent to.
            settings['type'] = this_selected.attr("data-type"); // type of input being used. Input or Select
            settings['value'] = this_selected.text(); //
            settings['class'] = this_selected.attr("class"); // The Class
            console.log(settings['table'] +' '+ settings['value']+ ' '+ settings['class']);
            // if there are optionional inserts passed lets grab them                                   
            console.log('passed options:');
            if(settings.fieldsArray == null){}else{
                //var fields = [];
                $.each(settings.fieldsArray,function(k,v){
                    //console.log('settings['+k+'] '+this_selected.attr(v));
                    $obj={};
                    $obj[k] = this_selected.attr(v);
                    fields.push($obj);
                });
            }
                                               
                                               
        }
 
        $(this).on('mouseover', function(event) {
            $(this).addClass("ui-state-hover");
        }).on('mouseout', function(event) {
            $(this).removeClass("ui-state-hover");;
        });
             
        if($(this).is('select')){
            $(this).on('change', function(){
                alert('changed');
                alert($(this).val());
                //console.log($(this));
                //load_settings($(this));

                var nt = $(this).text();
                var jsonstring = JSON.stringify(fields);
                // AJAX 
                
            });
        }
        if($(this).is('span')){
             $(this).on("blur", function () {
                alert('span');
                load_settings($(this));
                var nt = settings['value']
                console.log('comment: '+settings['value']);
                // we are going to update the db here.
               console.log('Insert');
               console.log(fields);
               var jsonstring = JSON.stringify(fields);
               console.log(jsonstring);

                $.ajax({
                    type: 'POST',
                    url: settings['url'],

                    data: {
                        fieldsArray: fields,
                        pk: settings['pk'],
                        table: settings['table'],
                        field: settings['field'],
                        value: settings['value']
                    },
                    cache: false,
                    success: function(data,status){
                                    console.log(data);
                    }

                });

            });
        }
    }
})(jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class=''>
    <select class='inlineEdit-jmc' ><option value='0' data-pk='3' data-url='/path/to/js/ajax/ajax.php' data-table='mysqltablename' data-field='ignore'>NO</option>
    
    <option value='1' data-pk='3' data-url='/path/to/js/ajax/ajax.php' data-table='mysqltablename' data-field='ignore' selected>YES</option>
    </select></td>
    
    
<td class=''><span class='inlineEdit-jmc' id='input' data-pk='3' data-url='/path/to/js/ajax/ajax.php' data-table='mysqltablename' data-field='comment' contenteditable='true'>Text that can be edited</td>

＆＃13;

Answer 1

尝试使用此代码部分代替以if($(this).is('span')){ $(this).on("blur", function ()

开头的代码部分

$("span").on("blur", function () {
  // your function content here
});

$("span select").on("blur", function () {
  e.stopPropagation();
});

两个备选选择器就像jQuery中的case语句

停止.blur（）函数来触发select语句但仍保留在span上

1 个答案: