如何從javascript中的焦點模糊事件中獲取元素值

Question

我想知道如何從focus-blur事件中觸發的元素（使用click事件）獲取值。我創建了像jQuery datepicker一樣的圖標選擇器。這裏的代碼，但是當我點擊圖標時，日期選擇器元素隱藏而沒有給出值。

PHP代碼

<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/> 
<div id="iconPicker" class="iconpicker dropdown-menu"> 
    <div class="iconpicker-wrapper"> 
     <table class="dt-icons"> 
     <?php 
     foreach (array_chunk($icons, 5, true) as $icon_cunk) { 
      echo '<tr>'; 
      foreach($icon_cunk as $key => $ico) { 
       echo '<td data-value="'. $key .'"><i class="' . $key .'"></i></td>'; 
      } 
      echo '</tr>'; 
     } 
     ?> 
     </table> 
    </div> 
</div> 

的Javascript

$("#contentIcon").keypress(function (e) { 
    e.preventDefault(); 
}); 

$(document).on('click', '#iconPicker table.dt-icons td', function() { 
    $('#contentIcon').empty(); 
    var _dtself = $(this); 
    document.getElementById("contentIcon").value = _dtself.data('value'); 
}); 

$('#contentIcon').focus(function() { 
    $('#iconPicker').show();    
}).blur(function() { 
    $('#iconPicker').hide(); 
}); 

更新

#iconPicker是隱藏的（顯示：無）元件，用於選擇圖標。當用戶關注#contentIcon輸入字段時將顯示，並且當模糊事件觸發時將被隱藏。如果我在blur甚至處理機部分除去$('#iconPicker').hide();，然後（I格式化該代碼，這要歸功於@Reddy）

$(document).on('click', '#iconPicker table.dt-icons td', function() { 
    $("#contentIcon").val($(this).data('value')); 
}); 

可以被觸發並將該值放置#contentIcon輸入字段。但是，#iconPicker沒有隱藏回來。如果我在click事件處理程序中使用了$('#iconPicker').hide();，如果用戶未選擇圖標，則#iconPicker將不會隱藏。

更新

這裏的例子jsfiddle.net

Answer 1

我解決這個問題取得任何屬性值通過執行@CMS' answer。在這裏修改一些代碼。

PHP的

<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/> 
<div id="iconPicker" class="iconpicker dropdown-menu"> 
    <div class="iconpicker-wrapper"> 
     <table class="dt-icons"> 
      <?php 
      $a = 0; 
      foreach (array_chunk($icons, 5, true) as $icon_cunk) { 
       echo '<tr>'; 
       foreach($icon_cunk as $key => $ico) { 
        if ($a == 0) { 
         echo '<td><a class="action-placement choosed-icon" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>'; 
        }else { 
         echo '<td><a class="action-placement" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>'; 
        } 
        $a++; 
       } 
       echo '</tr>'; 
      } 
      ?> 
     </table> 
    </div> 
</div> 

JavaScript的

$(document).on('keypress keydown', '#contentIcon', function (e) { 
    e.preventDefault(); 
}); 

document.onclick = function (e) { 
    e = e || window.event; 
    var element = e.target || e.srcElement; 

    if (element.id !== "contentIcon" && element.tagName !== "A" && element.className !== "action-placement" 
      && element.tagName !== "I" && element.className !== "icon-placement") { 
     $('#iconPicker').hide(); 
    } 
}; 

$(document).on('click', '#iconPicker table.dt-icons td a', function() { 
    $(".choosed-icon").removeClass("choosed-icon"); 
    $(this).attr("class", "choosed-icon"); 

    $("#contentIcon").val($(this).data('value')); 
}); 

$('#contentIcon').on('click', function() { 
    $('#iconPicker').show(); 
    $('#iconPicker').focus(); 
}); 

這裏demo。

Answer 2

試試這個;但是，你的代碼有點不清楚。

$("#contentIcon").keypress(function (e) { 
    e.preventDefault(); 
}); 

$(document).on('click', '#iconPicker table.dt-icons td', function() { 
    $('#contentIcon').empty(); 
    var _dtself = $(this); 
    document.getElementById("contentIcon").value = _dtself.data('value'); 
}); 

$('#contentIcon').focus(function() { 
    $('#contentIcon').show(); 
    console.log($('#iconPicker').val());    
}).blur(function() { 
    $('#contentIcon').hide(); 
    console.log($('#iconPicker').val()); 
}); 

Answer 3

您可以將代碼重構爲單行，如下所示。然而，這與你現在擁有的相同。

$(document).on('click', '#iconPicker table.dt-icons td', function() { 
    $("#contentIcon").val($(this).data('value')); 
}); 

$(this).data('value')是做正確的方式，但如果這不是爲你工作出於某種原因，那麼你可以使用attr像下面

$(this).attr('data-value')