Question

我有span动态添加到我的页面。我想在点击跨度时采取一些行动。

我有以下HTML ：

    <span class="assistly-widget" id="assistly-widget-1">            

<span style="width:65px;display:inline-block;min-height:22px;background: url(http://assets0.assistly.com/images/customer/widget/chat/launch_chat_sprite.png) no-repeat scroll 0 -40px transparent;">&nbsp;

</span></span>

我页面上的脚本：

    <script>
    $(document).ready(function () {
        alert('test');

        $(document).on('click', '.assistly-widget span', function () {
            alert('click');
        });
    });
</script>

呈现范围的代码：

         <li>


    <script src="https://d218iqt4mo6adh.cloudfront.net/assets/widget_embed_libraries_191.js"
        type="text/javascript"></script>

  <script>

      // ********************************************************************************
      // This needs to be placed in the document body where you want the widget to render
      // ********************************************************************************

      new DESK.Widget({
          version: 1,
          site: 'support.saxo.com',
          port: '80',
          type: 'chat',
          displayMode: 1,  //0 for popup, 1 for lightbox
          features: {
              offerAlways: false,
              offerAgentsOnline: false,
              offerRoutingAgentsAvailable: true,
              offerEmailIfChatUnavailable: false
          },
          fields: {
              ticket: {
                  // desc: &#x27;&#x27;,
                  // labels_new: &#x27;&#x27;,
                  // priority: &#x27;&#x27;,
                  // subject: &#x27;&#x27;
              },
              interaction: {
                  // email: &#x27;&#x27;,
                  // name: &#x27;&#x27;
              },
              chat: {
                  //subject: '' 
              },
              customer: {
                  // company: &#x27;&#x27;,
                  // desc: &#x27;&#x27;,
                  // first_name: &#x27;&#x27;,
                  // last_name: &#x27;&#x27;,
                  // locale_code: &#x27;&#x27;,
                  // title: &#x27;&#x27;
              }
          }
      }).render();
    </script>
                        </li>

通常.on效果很好，但在这种情况下没有任何反应。我得到的是alert('test')，而不是alert('click')。

Answer 1

我认为它会起作用。这是jsFiddle。 http://jsfiddle.net/shyamchandranmec/xv8Mf/2/

 $(document).on('click', '.assistly-widget span', function () {
     alert('click');
 });

Answer 2

尝试.live而不是.on

$(document).live('click', '.assistly-widget span', function () {
            alert('click');
        });

Answer 3

它的简单动态添加范围并为其指定名称或类，并为该范围注册实时点击事件。

Answer 4

当您为元素编写绑定时，它会在页面上找到这些元素并在其上绑定事件。按照你的方法，它会在document.ready上找到你的元素，而这个元素不存在。

您可以使用：

$(document).on('click', '.assistly-widget span', function () {
     alert('click');
 });

如在Konza的早期回答中所说的那样。因为它会将事件绑定到文档（始终存在），并且可以处理它在文档中找到的所有元素。

或者在添加元素后需要再次绑定事件。为此，您将绑定事件放在函数中，并在添加元素后调用该函数。那么，它将能够找到你的元素并在其上绑定事件。

使用jQuery - on点击动态添加的范围不起作用

4 个答案: