好的,所以基本上我只想创建一个简单的函数来改变已被点击的div的CSS值。选定的div($(this))将传递给divClicked函数。我可以在这里调用CSS jQuery函数,但我想在另一个函数中执行实现。
$('#container').children().click(function(){
divClicked($(this));
});
但在divClicked函数中,当我在div变量上运行jQuery函数时,它不起作用......任何想法我做错了。
function divClicked(selectedDiv)
{
$(selectedDiv).css('background', 'red');
}
答案 0 :(得分:2)
你在做什么连接?如果它位于实际“容器”script
上方的div
标记中,并且您没有将其包含在某种ready
回调或类似内容中,则可能是问题所在。或者,如果你之后将div添加到div中(因为你正在使用click
,它只会将处理程序挂接到那里的子句)。
因为如果“容器”div
及其子代已存在,则代码可以正常运行:
HTML:
<div id='container'>
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</div>
<input type='button' id='btnAdd' value='Add a new child'>
JavaScript的:
$('#btnAdd').click(function() {
$("#container").append("<div>New child, clicking me <em>won't</em> work</div>");
});
$('#container').children().click(function(){
divClicked($(this));
});
function divClicked(selectedDiv)
{
// You don't want `$` here, but I've left it just to demonstrate
// that your code should, largely, be working
$(selectedDiv).css('background', 'red');
}
...但请注意,之后添加的元素不会起作用,因为当你挂钩时它们不存在。
修复它将取决于什么是错误的。它可能只是将您的连接代码包装在ready
处理程序中(就像我在该示例中那样)或将其移动到页面底部的script
标记中的代码,就在关闭之前</body>
代码(作为YUI folks recommend),或者可能使用live
或delegate
。
答案 1 :(得分:1)
您的代码应该有效。见this。你的HTML中有什么东西我们不知道吗?
但是作为一个注释,当你传递$(this)
时,你已经传递了一个jQuery对象。然后再次将其包装为jQuery对象。而只使用selectedDiv
。或者,通过this
并使用$(selectedDiv)
。
答案 2 :(得分:0)
我认为无论如何“justkt”建议它会起作用。
您为CSS样式尝试过“background-color”吗?
答案 3 :(得分:0)
使用此jquery代码来避免错误。所以没有现场活动
$(document).ready(function(e) {
$('#btnAdd').click(function() {
$("#container").append("<div>New child, clicking me <em>won't</em> work</div>");
});
$(document).delegate('#container div', "click", function(){divClicked(this);});
var divClicked=function(selectedDiv) {
$(selectedDiv).css('background', 'red');
};
});
<div id='container'>
<div class="1">Child 1</div>
<div class="2">Child 2</div>
<div class="3">Child 3</div>
</div>
<input type='button' id='btnAdd' value='Add a new child'>