JQuery:动态添加标签绑定事件

说明

采用JQuery技术先获取页面元素,然后再在后面追加元素的时候(append),在下面用 $(selector) 获取刚刚添加的标签,发现怎么都获取不到。

之所以这样原因是因为页面已经将JS加载完毕,此时新增请求动态添加节点,自然获取不到。

动态添加的标签要事件委托才能获取到节点,具体解决办法:

  • 通过on绑定事件(注意使用on绑定事件时,hover无效,因为on的参数只能传一个函数)
  • live绑定:
  • delegate绑定:

语法:
$(selector1).on(events,[selector2],[data],fn)

参数描述
events一个或多个用空格分隔的事件类型和可选的命名空间
selector2可选。一个选择器字符串,用以过滤选定的元素,该选择器的后裔元素将调用处理程序。如果选择是空或被忽略,当它到达选定的元素,事件总是触发。
data可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理
fn该事件被触发时执行的函数。 false值也可以做一个函数的简写,返回false

注意

  • selector1 为动态添加节点的父级节点,请使用非动态添加的父级节点,不然同样获取不到。
  • 请委托给直接上级非动态添加节点,不要扩大范围,否则可能会造成一次点击多次执行情况!

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="sth1"><button id="btn1">btn1</button></div>
        <div id="sth2"></div>
        <div id="sth3"></div>

        <script src="jquery/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
            $("#btn1").click(function () {//能正常触发事件
                alert("btn 111");
            });
            $(function () {
                $("#sth2").append('<button id="btn2">btn2</button>');
                $("#sth3").append('<button id="btn3">btn3</button>');
            });

            $("#btn2").click(function () {//不能正常触发事件
                alert("btn 222");
            });
            $("#sth3").on("click","#btn3",function () {//能正常触发事件
                alert("btn 333");
            });
        </script>
    </body>
</html>
  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: jQuery 中可以使用 `.change()` 方法来为 select 元素绑定切换事件。 例如: ``` $('#mySelect').change(function() { console.log('选项已改变!'); }); ``` 也可以使用 `.on('change', function)` 的形式来绑定事件: ``` $('#mySelect').on('change', function() { console.log('选项已改变!'); }); ``` ### 回答2: 为了给 select 标签绑定切换事件,我们可以使用 jQuery事件绑定方法来实现。 首先,我们需要通过选择器获取到要绑定切换事件的 select 元素,这可以通过标签名或者类名来成。 接着,我们可以使用 jQuery 的 on 方法来绑定事件。on 方法允许我们指定事件类型和要执行的函数。 在这种情况下,我们要绑定事件是切换事件,即 select 元素的值发生改变时触发的事件。 假设我们有一个 id 为 selectElement 的 select 元素,我们可以使用以下代码来绑定切换事件: ``` $("#selectElement").on("change", function() { // 在这里执行需要的操作 }); ``` 在上面的代码中,我们使用了选择器 `#selectElement` 来获取到要绑定事件的 select 元素。 然后,我们使用 `on("change", function() { ... })`,来指定了切换事件和要执行的函数。 在函数体内,我们可以编写对 select 元素切换事件的响应代码。 例如,我们可以获取当前选中的选项的值,并将其打印到控制台上: ``` $("#selectElement").on("change", function() { var selectedOption = $(this).val(); console.log("当前选中的选项值为:" + selectedOption); }); ``` 通过这样的方式,我们通过 jQuery 给 select 标签绑定了切换事件,并且可以对切换事件进行相应的处理。 ### 回答3: 要给select标签绑定切换事件,我们可以使用jQuery的on()方法来实现。首先,确保在代码中引入了jQuery库。 我们可以通过在select标签添加一个id或者class来选择该标签。然后使用jQuery的选择器来选中该标签,接着使用on()方法为该标签绑定change事件。 下面是一个示例代码: HTML代码: <select id="mySelect"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> JavaScript/jQuery代码: $(document).ready(function(){ $("#mySelect").on("change", function(){ var selectedOption = $(this).val(); // 获取选中的值 console.log("选中的值是:" + selectedOption); // 执行其他操作 }); }); 在上述代码中,我们使用了$(document).ready()方法来确保页面加载成后再执行jQuery代码。然后,使用$("#mySelect")选择器选中了id为mySelect的select标签,并使用on()方法为其绑定了change事件。当选项切换时,change事件会触发。 在change事件处理程序内部,我们使用$(this).val()方法获取了选择的值,并可以进一步执行其他操作。 这是一个简单的示例,你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梁云亮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值