javascript - onclick 无法与 bootstrap 一起正常工作

标签 javascript jquery html twitter-bootstrap jquery-events

<分区>

我尝试将 onclick 事件与 Bootstrap 单选按钮一起使用来获取名称和属性,但有些地方不太顺利。

有些单选按钮触发了事件但没有得到名称或类(“未定义”),有些则根本没有响应。

<div class="theContainer">    
  <input type="radio" class="myClass" name="options" id="option1" onclick="updateODid()" autocomplete="off" > Radio 1
  <input type="radio" class="myClass" name="options" id="option2" onclick="updateODid()" autocomplete="off"> Radio 2
  <input type="radio" class="myClass" name="options" id="option3" onclick="updateODid()" autocomplete="off"> Radio 3
  <input type="hidden" class="findme" value="found me!">
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
      <input type="radio" class="myClass" name="options" id="option1"       onclick="updateODid()" autocomplete="off" > Radio 1
    </label>
    <label class="btn btn-primary">
      <input type="radio" class="myClass" name="options" id="option2" onclick="updateODid()" autocomplete="off"> Radio 2
    </label>
    <label class="btn btn-primary">
      <input type="radio" class="myClass" name="options" id="option3" onclick="updateODid()" autocomplete="off"> Radio 3
    </label>
  </div> 
</div>

jsfiddle.net/2sc8mc7L/6/

最佳答案

它不起作用,因为您以错误的方式混合了 javascript 和 jquery。

请检查更新的代码段:https://jsfiddle.net/2sc8mc7L/12/ onclick 函数应如下所示:

$(".myClass").on('click',function(){
  radioButtonClick($(this));
});

$("label.btn-primary").on('click',function(){
  radioButtonClick($(this).find('.myClass'));
});

function radioButtonClick(_this){
  alert("I'm in!")
  alert (_this.attr('name'));
  alert (_this.attr('class'));
  alert (_this.closest(".theContainer").find(".findme").val());
}

关于javascript - onclick 无法与 bootstrap 一起正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40487069/

相关文章:

javascript - ExtJS 和 Internet Explorer : Layout corruption with scrollbars

javascript - 用特定颜色的 li 元素绘画

jquery - link_to 和远程 => true + jquery : How? 有帮助吗?

javascript - 需要转义 jQuery 选择器字符串中的特殊字符

javascript - 没有匹配的 jQuery 时搜索栏发出警报

javascript - 检查文档是否准备好

javascript - 单击子菜单会弹出 WordPress 插件中的模式

html - 如何构建一个所有行和单元格都彼此相邻的 HTML 表格?

PHP结束标记删除换行符

javascript - 鉴于它是动态生成的,我如何在 Javascript/jQuery 中访问此 JSON 数据?