我有几个超链接,每个超链接都附有一个ID.当我点击此链接时,我想打开一个模态(http://twitter.github.com/bootstrap/javascript.html#modals),并将此ID传递给模态.我搜索谷歌,但我找不到任何可以帮助我的东西.
这是代码:
<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>
哪个应该打开:
<div class="modal hide" id="addBookDialog">
<div class="modal-body">
<input type="hidden" name="bookId" id="bookId" value=""/>
</div>
</div>
有了这段代码:
$(document).ready(function () {
$(".open-AddBookDialog").click(function () {
$('#bookId').val($(this).data('id'));
$('#addBookDialog').modal('show');
});
});
但是,当我单击超链接时,没有任何反应.当我给超链接一个href ="#addBookDialog"时,模态打开就好了,但它不包含任何数据.
我按照这个例子:如何将值参数传递给Bootstrap中的modal.show()函数
(我也试过这个:如何在模态对话框中设置输入值？)
码:
$('#Inputfield').keyup(function(e)
{
if(e.which == 13)
{
functionXyz();
}
else
{
functionZyx();
}
});
$(document).keyup(function(exit) {
if (exit.keyCode == 27) { functionZzy(); }
});
问题:如何删除keyCode == 27的keyup事件处理程序并保持其他$(document).keyup事件处理程序完好无损？
当我使用jQuery来处理下拉列表中的更改触发器时,我遇到了一个问题.
我使用2段代码:
//---------- Case 1
$(document).on("change", "#drop-down-id", function () {
alert(this.value);
});
//----------Case 2
$("#drop-down-id").change(function () {
alert(this.value);
});
第一个运行顺利,但第二个没有在我启动浏览器时触发,但在我刷新我的网站后,它可以工作.
你有什么主意吗？
我的jQuery版本:1.11.1,我在Chrome 38,Firefox 32和IE 11上测试过.
- 编辑:@JanR&Cheery:看起来像这样:
<select id="drop-down-id">
<% arr.each do |option| %>
<option value="<%= option %>"><%= option %></option>
<% end %>
</select>
我使用过Rails 4.1和arr是一个包含数字的数组.
- 编辑:我发现问题来自Rails的Asset Pipeline,而不是jQuery.
我把JS代码放在一个脚本标签中,它在两种情况下都有效,但当我把它放在assets文件夹中时,就会出现问题.
感谢您的快速回复!
任何人都可以告诉我这两个脚本之间有什么区别,我不是javascript/jquery专家.
$(document).on("click", "a", function () {
i = $(this).data("value");
alert(i)
})
$("a").click(function () {
i = $(this).data("value");
alert(i)
});
所以我知道有更好的方式来改变风格,但请耐心等待......
在Chrome(但不是Firefox)上似乎发生了一个小错误,其中"点击"事件在事件发生后鼠标移动之前不会执行任何操作.
$(function(){
$('#selectsomething a[rel$=".css"]').click(function(e){
e.preventDefault();
$('link.skeletor').attr('href', $(this).attr('rel'));
});
});
因此,如果您单击链接但不移动鼠标没有任何反应...您认为这可能是Chrome的合法错误或我做错了什么？
我正在查看此页面上的文档.他们有这样的例子......
$("p").on("click", function(){
alert( $(this).text() );
});
$("form").on("submit", false)
$("form").on("submit", function(event) {
event.preventDefault();
});
为什么这样更好或者它与此有何不同......
$("p").click(function(){
alert( $(this).text() );
});
$("form").submit(false);
$("form").submit(function(event) {
event.preventDefault();
});
作为最后一个问题,你为什么要这样做......
$("form").on("submit", function(event) {
event.stopPropagation();
});
代替 ...
$("form").submit(function(event) {
event.preventDefault();
});
我遇到一个问题,表行有一个click事件,但当用户点击其中一个表行的单元格中的链接时,我不希望触发该行的click事件.
想象一下,表格单元格中有一个链接并且通常单击任何表格行的空白区域(例如,不是链接)会导致某些操作,如手风琴/行折叠和展开.
发生的是下面的点击事件正在触发,然后跟踪链接(预期的操作).
我需要做的是排除在触发tr.title-row单击操作时单击一个href的内容(例如,警报不应该触发并且应该遵循链接).
这个jQuery代码正在为标题行设置点击事件(例如该行中的所有TH,任何单元格等)
$(document).ready(function() {
$(".report tr.title-row").click(function() {
alert('I am firing!');
});
以下是适用于的相同HTML:
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="report">
<tbody>
<tr class="title-row">
<th width="340"><span class="title">Test</span>
</th>
<th width="130" class="center-cell">Test</th>
<th width="90" class="status"></th>
<th></th>
<th width="160"> <a target="_self" href="http://www.google.com" class="link-class sub-class">I am triggering the TR click event</a>
</th>
</tr>
<tr>
<td class="sub-row" colspan="5">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><strong>SubRow</strong>
</td>
<td width="90" class="status"><span class="sub">Sub</span>
</td>
<td width="120"></td>
<td width="160"><a title="Continue" href="http://www.yahoo.com">Something</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr> …我编写了以下代码,这不会导致我的浏览器中的AJAX调用:
$(document).ready(function () {
$('form').submit(function(event) {
event.preventDefault();
var action = $(this).attr('action');
var data = $(this).serialize();
$.post(action, data, function(response) {
$("#die").html(response);
});
});
});
但是,我的教师在课堂上对以下代码进行了实时编码,这确实有效:
$(document).ready(function () {
$("form").on("submit", function(event) {
event.preventDefault();
var action = $(this).attr("action");
var formData = $(this).serialize();
$.post(action, formData, function(responseContent) {
$("#die").html(responseContent);
});
});
});
据我所知,我的代码之间的唯一有意义的区别是他的"上"与使用的第2行其实"提交",就api.jquery.com/submit,jQuery的基金会规定"此方法是.on('submit',handler)..."的快捷方式.这让我感到困惑的是为什么这两个片段表现不同.
为什么我不能抓住这个<a>......
<a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1">
<span class="select2-chosen">select item</span>
<abbr class="select2-search-choice-close"></abbr>
<span class="select2-arrow">
<b></b>
</span>
</a>
...用这个jQuery？
$(document).ready(function() {
$( ".select2-choice" ).click(function() {
alert( "Handler for .keydown() called." );
});
});
我认为这是产生下拉列表的功能:
createContainer: function () {
var container = $(document.createElement("div")).attr({
"class": "select2-container"
}).html([
"<a href='javascript:void(0)' onclick='return false;' class='select2-choice' tabindex='-1'>",
" <span class='select2-chosen'> </span><abbr class='select2-search-choice-close'></abbr>",
" <span class='select2-arrow'><b></b></span>",
"</a>",
"<input class='select2-focusser select2-offscreen' type='text'/>",
"<div class='select2-drop select2-display-none'>",
" <div class='select2-search'>",
" <input type='text' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' class='select2-input'/>",
" </div>",
" …使用hide()带有可选持续时间参数的jQuery 函数,我能够在我的网站上获得一些警报框,以便优雅地滑出屏幕并消失.
看起来隐藏动画的默认方向是向左滑动,尽管hide()定义页面中未定义此行为.
我需要选择让盒子也向右滑动或向上滑动.
同样重要的是,如果没有定义此行为,我担心不同的浏览器可能以不同的方式呈现动画.所以我也希望锁定一致性.
幻灯片左侧行为定义在哪里？切换到右侧滑动或向上滑动的最简单方法是什么？
$(document).ready(function() {
$("#close-alert-box-urgent").click(function() {
$("#alert-box-urgent").hide(1000);
});
$("#close-alert-box-news").click(function() {
$("#alert-box-news").hide('fast');
});
});.alert-box {
width: 50vw;
position: relative;
margin: 20px auto;
border: 1px solid black;
}
.alert-box-close {
position: absolute;
top: -12px;
right: -12px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<article class="alert-box" id="alert-box-urgent">
<h1>Tuition Alert</h1>
<p>text text text text text text text text text text text text text text</p>
<a class="alert-box-close" id="close-alert-box-urgent">
<img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
</a>
</article>
<article …