jQuery Mobile .delegate() 未触发

发布于 2024-12-22 09:08:43 字数 2481 浏览 3 评论 0原文

我对 jQuery 很陌生,并且在与委托相关的问题上遇到了一些困难。 在我的代码中,我加载了一个动态页面:

    $("#results").delegate('li', 'click', function(evt){
      var queryData = "id=" + $(this).attr("id");
      if ( $(this).attr("id") ){
        $.ajax({
          type: "GET",
          url:  "wiw_detail_page.html",
          data: queryData,
          beforeSend: onDetailBeforeSend,
          success: onDetailSuccess,
          error: onError
        });
      }
      else
      {
        alert("Please select an Employee from the list");
      }
        return false;
    });

这是 onDetailSuccess 函数:

    function onDetailSuccess( data, status ){
      $("body").append( data );
      $("#wiw_detail_page").page( );
      $.mobile.changePage( "#wiw_detail_page", { transition: 'slide' } );
    }

一切正常,因为我将第一页移动到“wiw_details_page”。 在新页面内,我有一个可折叠的字段列表,如下所示:

  <div data-role="collapsible" data-collapsed="false" data-theme="b" id="comData">
    <h2>Communication Data</h2>
    <div id="communicationData">
      <fieldset>
        <label for="address">Address:</label>
        <a href="#locationMap">
          <input class="goMap" type="text" 
                 name="address" id="address" 
                 disabled="true" 
                 value="<%=employeeprofile-building%>"/>
        </a>
      </fieldset>
    </div>
  </div>

我需要在地址输入字段上附加一个单击处理程序,并且由于该页面尚未在 $(document).ready( ) 创建,所以我附加了像这样的委托:

    // Use delegation, since detail view is not availble at document.ready time:
    $("#wiw_detail_page").delegate('input.goMap','click', function(evt){
      if ( $(this).attr( "id" ) == 'address' ){
        alert("Click!");
        if ( navigator.geolocation ) {
          detectBrowser( );
          navigator.geolocation.getCurrentPosition( function( position ){
            newInitialize( position.coords.latitude, position.coords.longitude );
          })
        }else{
          detectBrowser( );
          newInitialize(45.06150, 7.65599);
        }
      }
     });

    });

这个委托永远不会发生,当我单击输入字段时,什么也没有发生(甚至没有任何类型的错误)。

我还尝试将选择器更改为:

    $("#comData").delegate('input.goMap','click', function(evt)

作为绝望的尝试,我将其更改为:

    $("body").delegate('input.goMap','click', function(evt)

有线索吗?

抱歉问了这么长的问题,提前致谢, R。

I'm quite new to jQuery and I'm struggling a bit on an issue related to delegation.
In my code I have a dynamic page loaded by:

    $("#results").delegate('li', 'click', function(evt){
      var queryData = "id=" + $(this).attr("id");
      if ( $(this).attr("id") ){
        $.ajax({
          type: "GET",
          url:  "wiw_detail_page.html",
          data: queryData,
          beforeSend: onDetailBeforeSend,
          success: onDetailSuccess,
          error: onError
        });
      }
      else
      {
        alert("Please select an Employee from the list");
      }
        return false;
    });

This is the onDetailSuccess function:

    function onDetailSuccess( data, status ){
      $("body").append( data );
      $("#wiw_detail_page").page( );
      $.mobile.changePage( "#wiw_detail_page", { transition: 'slide' } );
    }

Everything works well, as I get my first page moved to "wiw_details_page".
Inside the new page I have a list of fields, under a collapsible, like that:

  <div data-role="collapsible" data-collapsed="false" data-theme="b" id="comData">
    <h2>Communication Data</h2>
    <div id="communicationData">
      <fieldset>
        <label for="address">Address:</label>
        <a href="#locationMap">
          <input class="goMap" type="text" 
                 name="address" id="address" 
                 disabled="true" 
                 value="<%=employeeprofile-building%>"/>
        </a>
      </fieldset>
    </div>
  </div>

I need to attach a click handler on the Address input field, and since this page is not yet created at $(document).ready( ) I attached a delegate to it like this:

    // Use delegation, since detail view is not availble at document.ready time:
    $("#wiw_detail_page").delegate('input.goMap','click', function(evt){
      if ( $(this).attr( "id" ) == 'address' ){
        alert("Click!");
        if ( navigator.geolocation ) {
          detectBrowser( );
          navigator.geolocation.getCurrentPosition( function( position ){
            newInitialize( position.coords.latitude, position.coords.longitude );
          })
        }else{
          detectBrowser( );
          newInitialize(45.06150, 7.65599);
        }
      }
     });

    });

This delegation never takes place and when I click on the input field nothing happens (not even any kind of error).

I have also tried by changing the selector to:

    $("#comData").delegate('input.goMap','click', function(evt)

And as a desperate try, I changed it to:

    $("body").delegate('input.goMap','click', function(evt)

Any clue?

Sorry for such a long question and thanks in advance,
R.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

2024-12-29 09:08:43

您想尝试#communicationData,如下所示:

$("#communicationData").delegate('input.goMap','click', function(evt) {...}

Would you like to try #communicationData, as in:

$("#communicationData").delegate('input.goMap','click', function(evt) {...}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文