停止.blur（）函數從選擇語句觸發但保持在範圍

Question

我試圖創建一個內聯編輯函數，以不同的元素觸發。

我試圖使用其他插件，但一直沒有能夠讓他們做我想要的東西，所以決定嘗試創建一個我自己的插件，同時學習jQuery一路上。

我現在遇到的問題是我有一個正確觸發span元素的.blur事件，這是我想要的，但是當元素是select元素時，我不希望blur事件觸發。由於代碼位於模糊事件觸發器的下方，因此不是所需的結果。任何人都可以告訴我怎麼只能觸發模糊（）事件對span元素，並沒有別的

$('.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);

<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>

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語句