从事件中重新触发事件

时间:2016-07-20 02:13:57

标签: events dojo

这是一个搜索框模块(经过大量清理以满足老板)。除more事件外,这一切都有效。我得到了结果,它们出现了,而且#34;加载更多" div出现了。

点击more后,我希望search事件重新运行。在more中,我做了一些简单的会话计算,我需要将其传递给search事件,该事件有效。 click()没有。

我已尝试将more事件移至search事件之外,但未成功。

This fiddle seems to work, albeit with the node ID instead

define([
'dojo/dom',
'dojo/dom-construct',
'dojo/on',
'dojo/query'
'dojo/domReady!'
], function(
dom,
domConstruct,
on,
query
) {

var search = {

    display: function(){

        sb = '<div id="searchWrapper" class="searchWrapper"><h3>Search</h3>
<input id="searchString" type="text" />';

        sb += '<h3>Search</h3><select id="sBy">';
        sb += '<option value="0">Choose...</option>';
        sb += '<option value="f">Foo</option>';
        sb += '<option value="b">Bar</option>';
        sb += '<option value="fb">Foo & Bar</option>';
        sb += '</select>';

        sb += '<div class="searchBtn">
<button type="button" id="search">Search</button></div>';
        sb += '</div>';

        domConstruct.place(sb, dom.byId('body'), 1);

        on(dom.byId('search'), 'click', function(e){

            var r = thisIsWhereDataIsRetrieved(params, whatever);

            // r is the response from the db call
            if(typeof r === 'object'){

                var sr = 'here are the results!';

                for (var result in r) {

                    sr += 'this particular result';

                }

               if(r.length === 50) {
                  sr += '<div id="more" class="more">Load More</div>';
               }
                domConstruct.place(sr, dom.byId('searchWrapper'), 'last');

            }

            on(query('.more'), 'click', function(e){

                // get next results having done stuff
                // to track the state of the search, which works
                dom.byId('search').click(); <<<<< not working

            });


        });

    }

}

return search;

});

编辑:我通过在thisIsWhereDataIsRetrieved事件中重新调用more并在more节点之前追加下一个结果来解决这个问题,但看起来似乎仍然如此。我最好做我能做的事情!

EDIT2:添加了more节点!

1 个答案:

答案 0 :(得分:1)

除了匿名功能外,您还需要使用其他功能 例如,像这样: (注意你可能需要一个比实际方法更好的结构,如果你没有正确清理dom,使用查询可能会产生副作用。我鼓励你写一个合适的小部件并使用附加点)

define([
  'dojo/dom',
  'dojo/dom-construct',
  'dojo/on',
  'dojo/query'
  'dojo/domReady!'
], function(
  dom,
  domConstruct,
  on,
  query
) {

  var search = {

    display: function() {

      sb = '<div id="searchWrapper" class="searchWrapper"><h3>Search</h3>
<input id="searchString" type="text" />';

      sb += '<h3>Search</h3><select id="sBy">';
      sb += '<option value="0">Choose...</option>';
      sb += '<option value="f">Foo</option>';
      sb += '<option value="b">Bar</option>';
      sb += '<option value="fb">Foo & Bar</option>';
      sb += '</select>';

      sb += '<div class="searchBtn">
<button type="button" id="search">Search</button></div>';
      sb += '</div>';

      domConstruct.place(sb, dom.byId('body'), 1);

      var onSearchClick = function(e) {

        var r = thisIsWhereDataIsRetrieved(params, whatever);

        // r is the response from the db call
        if (typeof r === 'object') {

          var sr = 'here are the results!';

          for (var result in r) {

            sr += 'this particular result';

          }

          if (r.length === 50) {
            sr += '<div id="more" class="more">Load More</div>';
          }
          domConstruct.place(sr, dom.byId('searchWrapper'), 'last');

        }

        on(query('.more'), 'click', function(e) {

          // get next results having done stuff
          // to track the state of the search, which works
          onSearchClick();

        });


      }
      
      on(dom.byId('search'), 'click', function(e) {

          // get next results having done stuff
          // to track the state of the search, which works
          onSearchClick();

        });
    }

  }

  return search;
});