2009-05-26 2 views
5

У меня есть список элементовJQuery правопреемником OnClick для ли от ссылки

<ul class="list"> 
    <li> 
     <a href="#Course1" class="launch" onclick="alert('event 1')">event 1</a> 
    </li> 
    <li class="alt"> 
     <a href="#Course2" class="launch" onclick="alert('event 2')">event 2</a> 
    </li> 
    <li> 
     <a href="#Course3" class="launch" onclick="alert('event 3')">event 3</a> 
    </li> 
    <li class="alt"> 
     <a href="#Course4" class="launch" onclick="alert('event 4')">event 4</a> 
    </li> 
</ul> 

Я хочу, чтобы иметь возможность назначить OnClick в связи с OnClick от литий Aswell

Моя попытка так далеко один клик позади (как я назначаю сценарий к OnClick, а не выполнение сценария)

$('.list li').click(function() { 
    var launch = $('a.launch', this); 
    if (launch.size() > 0) { this.onclick = launch.attr('onclick'); } 
}); 

спасибо заранее Tim

ответ

7

здание на @Thomas Stock'sanswer следующий код предотвращает двойное выполнение при нажатии на ссылку вместо li. (Получил его от here сайта JQuery)

$(document).ready(function() { 

    $('ul.list li').click(function(e) { 
     var $target = $(e.target); 
     if(!$target.is("li")) //magic happens here!! 
     { 
      return; 
     } 

     var launch = $('a.launch', this); 
     if (launch.size() > 0) 
     { 
      eval(launch[0].onclick()); 
     } 
    }); 
}); 
+0

ahhhh the magic - thank you –

1

Loop над Li, используя каждый вместо использования мыши:

$(document).ready(function(){ 
    $('.list li').each(function() { 
     var launch = $('a.launch', this); 
     if (launch.size() > 0) { this.onclick = launch.attr('onclick'); } 
    }); 
}); 
1
$('.list li').click(function() { 
    var launch = $('a.launch', this); 
    if (launch.size() > 0) { eval(launch.attr('onclick')) } 
}); 

решение Марио будет также работать. Mine примет событие onclick ребенка и выполнит его, на самом деле щелчок.

Решение Mario свяжет событие onclick с привязкой к загрузке документа. Выберите то, что вам подходит.

+0

Hi Thomas Мне очень нравится эта реализация, поскольку она вписывается в некоторые другие вещи, которые я делаю. Но когда я нажимаю на исходную ссылку, javascript сейчас срабатывает дважды, есть ли способ предотвратить это, используя ваш метод? –

+0

Хммм, хороший вопрос. Я знаю, что это возможно, потому что раньше я делал что-то подобное. Держись, я проверю документацию jQuery –

+0

, есть ли у вас какая-либо идея, по которой сначала стрелять? (добавьте оповещение() в li.click, чтобы узнать) –

0

Лучше всего выбрать один тип элемента - возможно, с большими размерами - и назначить обработчик кликов только этим. Если onclick установлен как для тега A, так и для LI (с помощью любых средств), вызов может произойти дважды, если только вы специально не предотвращаете такое событие в вашей именованной функции.

Есть ли конкретная причина, по которой вы хотите, чтобы одно и то же действие происходило на обоих типах элементов, а не только на одном? (Если это что-то вдоль линий «просто мера предосторожности,» это, вероятно, лучше всего проработать вопросы, вместо тротуарной над ними с большим количеством сценариев.)

6

Вы делаете это так, весь литий блоком является активной ссылкой, а не только на элементе? Если это так, вы можете легко сделать это с помощью CSS.

HTML:

<html> 
<head> 
    <title>Testing Block Elements</title> 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
</head> 

<body> 
    <ul id="menu"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 3</a></li> 
     <li><a href="#">Link 4</a></li> 
     <li><a href="#">Link 5</a></li> 
    </ul> 
</body> 
</html> 

CSS:

#menu { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

#menu li { 
    /* Added to show the whole li element will be a clickable link. */ 
    width: 250px; 
    border: 1px solid #000000; 
} 

#menu li a { 
    display: block; 
} 

EDIT:

И делая это, вам нужно всего лишь прикрепить событие щелчка к тегу, если вам действительно нужно сделайте некоторый javascript, когда пользователь нажимает на него.

+1

Лучший ответ imho. Исходный плакат хочет быть возможность щелкнуть по LI. Нет необходимости в javascript здесь, отображение: блок делает магию. –

Смежные вопросы