dongwai4434 2018-08-14 20:48 采纳率: 0%
浏览 39
已采纳

单击<span>标签运行JQuery javascript函数[重复]

This question already has an answer here:

I create a span using PHP like this.

if ($subnetkey  == 1 ) { echo ("<span class='subnetkey'>S/N of: $subnetnum</span>&nbsp;&nbsp;");}

It works, and shows the correct data on screen. Additionally if I look at it using 'Inspect Element' its properly formatted.

<span class="subnetkey">S/N of: 780</span>

I have this script at the top of the page. I've also tried it at the bottom.

<script>    
$(document).ready(function(){
    $(".subnetkey").click(function() {
        alert("subnet click mode");
    });
});
</script>

When I click the span, nothing happens. I get no errors, and of course I don't see the alert fire.

It seems like this is a timing issue between building the page dynamically and using the page. But in case thats not it, what can I do to make the function fire?

</div>
  • 写回答

1条回答 默认 最新

  • douling8772 2018-08-14 21:03
    关注

    JQuery Event Methods like click(), dblclick(), mouseenter() etc. work only for elements already created when DOM is rendered. For dynamically created elements you use on() method with the below syntax (see previous post):

    $(staticAncestors).on(eventName, dynamicChild, function() {});
    

    Since it is a dynamically created element your code won't work. Try:

    $(document).on('click', '.subnetkey', function() {
        alert("subnet click mode");
    });
    

    jQuery is only aware of the elements in the page at the time it runs, so new elements added to the DOM are unrecognized by jQuery. To combat the problem use event delegation, bubbling events from newly added items up to a point in the DOM which was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go all the way up the DOM tree. Ideally you should delegate to the nearest parent existing at the time of page load.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 怎么在stm32门禁成品上增加记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 解riccati方程组