Могу ли я иметь два события jquery onclick в одном элементе?

Question

Я знаю, что это было задано раньше, но я не могу получить синтаксис о том, как добавить свои конкретные функции в один из них.

Текущий код OnClick:

<a class="thumbLinkCart" href="#" onclick="simpleCart.add('name=lemon','price=7.99','image=images/thumbs/yellowgold.jpg');return false;"></a> 

Второе событие будет добавлено:

<script> 
    $(document).ready(function() { 
     $('#demo12').click(function() { 
    $.growlUI('Item added to cart'); 
}); 
}); 
</script> 

Может кто-то помочь мне добавить вторую функцию в первом OnClick случае пожалуйста.

Answer 1

Вы можете иметь несколько событий (похожих), связанных с одним и тем же элементом. Но если вы связываете события с помощью inline-обработчика событий, вы можете сделать одно событие определенным.

ПРИМЕЧАНИЕ: Всегда лучше связывать события с помощью javascript, поскольку он поддерживает разделение проблем и поддержку.

Вы можете связать несколько событий к элементам в вашем JS код, который вместо намного чище

JQuery

$('#demo12').on('click', function() { 
    alert('1st click event'); 
    // Add items to the cart here 
}); 

$('#demo12').on('click', function() { 
    alert('2nd click event'); 
    // Do something else 
}); 

Vanilla Javascript

document.querySelector('#demo12').addEventListener('click', function() { 
    alert('1st click event'); 
    // Add items to the cart here 
}); 

document.querySelector('#demo12').addEventListener('click', function() { 
    alert('2nd click event'); 
    // Do something else 
}); 

Check Fiddle

Answer 2

Попробуйте заменить "return false;" с "event.preventDefault();". Это должно позволить событию распространяться, поэтому обработчик кликов запускает, но все равно останавливает a-href от навигации.

Answer 3

Обычно считается неправильной практикой использования атрибута onclick. Он смешивает слишком много структуры (HTML) с поведением (JavaScript).

Почему бы не сделать все это вместе?

<a class="thumbLinkCart" href="#">Link</a> 

И

<script> 
    $(document).ready(function() { 
    $('.thumbLinkCart').click(function() { 
     simpleCart.add('name=lemon','price=7.99','image=images/thumbs/yellowgold.jpg'); 
     $.growlUI('Item added to cart'); 
    }); 
    }); 
</script>