Question

使用Javascript更新网络设备列表的HTML内容。我使用Notify库： http://getuikit.com/docs/notify.html 网络设备可以在线（启动并运行），几秒钟后即可脱机。当我加载我的网页并且当我点击它时设备已经脱机我可以显示通知提醒。但是当我的网页处于打开/活动状态并且设备从在线更改为离线时，单击它时不会显示警告。

页面加载HTML（Works）

<div data-uk-observe id=<?php echo $device_list['serialnumber'];?> show="1" data-toggle="notify" data-message="System is offline" data-options="{&quot;status&quot;:&quot;danger&quot;, &quot;pos&quot;:&quot;top-right&quot;}">
<a href="#" ><?php echo $device_list['serialnumber']?></a>
</div>

这是JS用于在设备仪表板中动态更改HTML（不工作）。

document.getElementById(serialNumber).setAttribute("show", "1");
document.getElementById(serialNumber).setAttribute("data-toggle", "notify");
document.getElementById(serialNumber).setAttribute("data-message", "System is offline");
document.getElementById(serialNumber).setAttribute("data-options", "{\"status\":\"danger\", \"pos\":\"top-right\"}");

// Remove A tag
$('#' + serialNumber).find('a').remove();
// Add new A HREF
$('#' + serialNumber).append('<a href="javascript:void(0);">' + serialNumber + '</a>');

当我使用Firebug比较HTML时，它是相同的：

加载网页

<div data-uk-observe="" id="99238944-13231" show="1" data-toggle="notify" data-message="System is offline" data-options="{"status":"danger", "pos":"top-right"}">
<a href="javascript:void(0);">99238944-13231</a>
</div>

注入HTML后

<div data-uk-observe="" id="99238944-13232" show="1" data-toggle="notify" data-message="System is offline" data-options="{"status":"danger", "pos":"top-right"}">
<a href="javascript:void(0);">99238944-13232</a>
</div>

在我的JQuery处理元素中，在注入HTML之后永远不会调用click。

(function($, window, document){
  'use strict';

  var Selector = '[data-toggle="notify"]',
      autoloadSelector = '[data-onload]',
      doc = $(document);

  $(function() {

    $(Selector).each(function(){

      var $this  = $(this),
          onload = $this.data('onload');

      if(onload !== undefined) {
        setTimeout(function(){
          notifyNow($this);
        }, 800);
      }

      $this.on('click', function (e) {
        console.log('Click!');
        e.preventDefault();
        notifyNow($this);
      });

    });

  });

  function notifyNow($element) {
      var message = $element.data('message'),
          options = $element.data('options');

      if(!message)
        $.error('Notify: No message specified');

      $.notify(message, options || {});
  }

}(jQuery, window, document));

我尝试使用data-uk-observe作为文档，但坚持为什么没有响应。

点击没有响应的JQuery通知

0 个答案: