Как предполагает Дэвид, поскольку вы повторяете пользовательские элементы управления и явно устанавливаете их id
, вы получите несколько элементов управления с одинаковым id
на странице. Я полагаю, что $("#someid")
вернет первый элемент на странице и не обязательно тот, который вы действительно хотели.
Дэвид предлагает добавить классы CSS к элементам в вашем пользовательском элементе управления (это не имеет ничего общего с jQuery - хотя написанный вами jQuery будет ссылаться на них).
Например
<%@ Control Language="C#" %>
<div class="mainpanel">
<div>
test
</div>
<div class="shortly">
??
</div>
<button class="resetButton">
Reset
</button>
</div>
[PS. обратите внимание, что вы, вероятно, должны удалить свой CSS из своего пользовательского элемента управления, поскольку повторение каждый раз, когда элемент управления появляется на странице, является плохой практикой, например. включите это либо в свою главную страницу, либо в отдельный файл CSS]
<style type="text/css">
#mainpanel
{
width: 145px;
height: 123px;
}
#shortly
{
background-color: #FFFFFF
}
</style>
Ваш сценарий может быть чем-то вроде
$(function () {
// function that does something exciting?
var liftOff = function() {
// ....
};
// Get a date that is some (short) time in the future
var getDeadline = function() {
var shortly = new Date();
shortly.setSeconds(shortly.getSeconds() + 5.5);
return shortly;
};
// Attach click handler to all our buttons
$("div.mainpanel button.resetButton").click(function(event){
// I am assuming that you will not be nesting these controls?
var $mainpanel = $(this).parents("div.mainpanel") // this will find the mainpanel div that contains the pressed button
.effect("highlight", {}, 700 );
$("div.shortly", $mainpanel) // this will find any div with the class = shortly inside mainpanel
.countdown('change', { until: getDeadline() });
});
// Start all countdowns going on page load
$('#shortly').countdown({
until: getDeadline(),
onExpiry: liftOff,
layout: '{sn}'
});
});