模糊点击执行之前

我有两个事件：1）模糊和点击。如果用户将输入元素留空，则blur事件将删除所有内容，并且click事件将显示一个对话框。模糊点击执行之前

$(document).on('click','.glyphicon-filter',glyphiconFilterClicked); 
function glyphiconFilterClicked() { 
    debugger; // show dialog box goes here 
} 

$(document).on('blur','input',filterBlurred); 
function filterBlurred() { 
    if ($(this).val() === '') { 
     $(this).closest('tr').find('th').html('&nbsp;'); 
    } 
}

问：我怎么能说“在输入模糊，不清空父个元素，如果其原因是因为用户只需点击类=” glyphicon过滤器“

来源

2014-01-14 Phillip Senn

你的意思是'删除所有内容'它是一个窗体重置？ – Sekai

该行中的所有th元素都通过非空白空格替换其中的html来清除。 –

您将无法连接两个事件您可以使用setTimeout （...）在模糊事件处理程序中等待，比如说100毫秒。然后在click处理程序中设置一个标志为true，setTimeout中的回调将在擦除表单域的值之前进行检查。

编辑：一些工作的代码，我认为作品你打算......

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Filter Blur Demo</title> 
</head> 
<body> 
    <table> 
     <tbody> 
      <tr> 
       <th>Apples</th> 
       <td><input type="text"> <button class="glyphicon-filter">Filter...</button> 
        (defaults)</td> 
      </tr> 
      <tr> 
       <th>Oranges</th> 
       <td><input type="text" data-filter-icon-timeout="2000"> <button class="glyphicon-filter">Filter...</button> 
        (custom timeout)</td> 
      </tr> 
      <tr> 
       <th>Bananas</th> 
       <td><input type="text" data-filter-icon-selector="a"> <a href="#" class="glyphicon-filter">Filter...</a> 
        (custom filter icon selector)</td> 
      </tr> 
     </tbody> 
    </table> 
    <ol> 
     <li> 
      <label>Peaches</label> 
      <input type="text" 
       data-filter-icon-container="li" 
       data-filter-icon-timeout="250" 
       data-filter-icon-selector="a" 
       data-filter-cleared-out-selector="label" 
       data-filter-cleared-out-value="n/a"> 
      <a href="#" class="glyphicon-filter">Filter...</a> 
      (everything but the kitchen sink) 
     </li> 
    </ol> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script> 
     function filterBlurred(event) { 
      //console.info("blur"); 
      var input = event.target, 
       filterIconSelector = input.getAttribute("data-filter-icon-selector") || ".glyphicon-filter", 
       containerSelector = input.getAttribute("data-filter-icon-container") || "tr", 
       clearedOutSelector = input.getAttribute("data-filter-cleared-out-selector") || "th", 
       clearedOutValue = input.getAttribute("data-filter-cleared-out-value") || "&nbsp;", 
       timeout   = Number(input.getAttribute("data-filter-timeout")) || 250, 
       $row    = $(input).closest(containerSelector), 
       $icon    = $row.find(filterIconSelector), 
       clearInput = function() { 
        if (!input.value) { 
         if ($icon.attr("data-filter-icon-clicked") !== "yes") { 
          $row.find(clearedOutSelector).html(clearedOutValue); 
         } 

         $icon.attr("data-filter-icon-clicked", ""); 
        } 
       }; 

      setTimeout(clearInput, isNaN(timeout) ? 250 : timeout); 
     } 

     function glyphiconFilterClicked(event) { 
      event.target.setAttribute("data-filter-icon-clicked", "yes"); 
      //console.info("click", event.target); 
      event.preventDefault(); 
      // do other stuff 
     } 

     $(document) 
      .on("blur", "input", filterBlurred) 
      .on("click", ".glyphicon-filter", glyphiconFilterClicked); 

    </script> 
</body> 
</html>

你应该能够复制并粘贴到一个HTML文件，保存它，然后加载它在浏览器。它在Firefox中为我工作。

在这种情况下，“标志”是图标元素上的HTML5数据属性。这使得事情非常可定制且可重用。

来源

2014-01-14 17:14:44

嗯。我可以把这个标志叫做“DontTaseMeBro”。 –

我想我要做的是设置一个$ .Deferred（）变量，如果单击过滤器图标，然后我会解决它。否则，我会等待100毫秒，并假定过滤器图标未被点击。 –

我没有？我不明白这个问题，但这里是我得到的，如果用户模糊输入，而不是class =“glyphicon-filter”的输入，那么不要清空元素吧？如果是这样，请按如下方式进行：

$(document).on('blur','input.glyphicon-filter',filterBlurred); 
function filterBlurred() { 
    if ($(this).val() === '') { 
     $(this).closest('tr').find('th').html('&nbsp;'); 
    } 
}

来源

2014-01-14 17:13:37 Sekai

模糊点击执行之前

回答

相关问题