如何从现有的第三方控件链接jQuery事件?

时间:2014-05-06 14:25:46

标签: javascript jquery events kendo-ui telerik

我需要扩展第三方控件as demonstrated here。请注意搜索框如何可见并响应过滤器请求。

我想将此功能添加到该搜索框中,以便我可以根据搜索框中是否存在文本来调整UI。

listView._filter.searchInput.input(function() { } );

问题在于,当我按原样应用此行时,似乎我正在删除上一个事件,我无法点击或对搜索框执行任何操作。

问题

  1. 我可以用什么工具或方法来确定我覆盖的功能? (我认为正在发生的事情)
  2. 我如何正确地发起_private事件,然后我的事件? (我假设私有事件需要首先触发,以允许UI按预期工作)

3 个答案:

答案 0 :(得分:1)

如果要在列表视图为空时显示不同的内容,则应执行以下操作:

$(listView._filter.searchInput).on("keyup", function(){        
    if($('#local-filterable-listview').data("kendoMobileListView").items().length == 0)
      {
        $("#defaultHomeContent").show();  
      }
    else
        {
         $("#defaultHomeContent").hide(); 
        }
  });

并在样式属性中将div#defaultHomeContent设置为display:none

答案 1 :(得分:1)

首先,我认为这就是你最终想做的事情的解决方案......

/* initialize, logic... */
if(listView._filter.searchInput.val() == ''){
   $("#local-filterable-listview").hide();
   $("#defaultHomeContent").show();
 }
/* subscribe to the 'keyup' event on the searchBox..*/ 
 listView._filter.searchInput.on('keyup',function(){
   var showHideDefault = ($(this).val() == '')?'show':'hide';
   var showHideList = ($(this).val() == '')?'hide':'show';
   $("#local-filterable-listview")[showHideList]();
   $("#defaultHomeContent")[showHideDefault]();
 });

应该让你开始运行......

回答你的问题......  1.我所知道没有“工具”,我发现最好的方法是在源代码中查找事件......  2.要取消绑定jquery中的事件,需要使用.unbind()函数,我们上面所做的只是向已经绑定到搜索表单的任何事件添加事件回调..这样'_private'事件回调和新订阅的事件触发,因为我们在初始化listView之后添加了事件(这是'_private'事件被绑定的地方),它将在'_private'事件后触​​发..

答案 2 :(得分:0)

我不太确定你想做什么,但是这是你在用户打字时如何解雇一个事件。因此,如果您的内容位于表格中并且您想要过滤,那么您可以这样做:

HTML

<input class="searchbar" placeholder="Search">
<table class="contentTable">
    <tr>
        <td>
            Anton
        </td>
    </tr>
    <tr>
        <td>
            Bill
        </td>
    </tr>
    <tr>
        <td>
            Christian
        </td>
    </tr>
</table>

的jQuery

$(".searchbar").keyup(function(){
    // do the magic here
    val = $(this).val();
    $('.contentTable tbody tr').hide();
    $('.contentTable tbody td:contains("'+ val +'")').parent("tr").show();
})

JSFIDDLE:http://jsfiddle.net/nYc64/1/