0

Есть несколько кнопок

<button class='view-images'></button>
<button class='view-videos'></button>
<button class='view-html'></button>

Каждая кнопка вызывает событие:

$('button').on('click', function() {
    $(this).trigger('append', '..data..');
});

И есть 3 события:

$('.view-images').bind('append', function(e, data) {
    alert('images');
});

$('.view-videos').bind('append', function(e, data) {
    alert('videos');
});

$('.view-html').bind('append', function(e, data) {
    alert('html');
});

По сути когда мы кликаем на определенную кнопку, то должно происходить событие, но оно не происходит. Как правильно сделать?

$('button').on('click', function() {
    $(this).trigger('append', '..data..');
});

$('.view-images').bind('append', function(e, data) {
	alert('images');
});
	
$('.view-videos').bind('append', function(e, data) {
	alert('videos');
});
	
$('.view-html').bind('append', function(e, data) {
	alert('html');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class='view-images'>images</button>
<button class='view-videos'>videos</button>
<button class='view-html'>html</button>

4
  • Есть вкратце, то вы во первых обработчик клика не вешаете. Синтаксис неверный, можете через тот же on. Во-вторых изнутри обработчика клика к кликаемому элементу неправильно обращаетесь. Можно черзе $(this). В третьих лучше использовать on вместо bind как говорит сама дока jQuery 27 июл 2016 в 11:51
  • Почему-то тут пример заработал, не пойму в чем дело.
    – lampa
    27 июл 2016 в 13:22
  • ну так вы весь основной втф из своего кода правкой вычистили, вот он и заработал) 27 июл 2016 в 13:37
  • @Утка не, баг был как раз именно в том, что не учел момент с динамическими элементами. Увы, ошибки в примере - это мой косяк.
    – lampa
    27 июл 2016 в 13:47

3 ответа 3

2

$button на $(this) меняем :

		$(function() {
		  $('button').on('click', function() {
		    $(this).trigger('append', this);
		  });

		  $('.view-images').on('append', function(e, data) {
		    alert('images');
		    console.log(data);
		  });

		  $('.view-videos').bind('append', function(e, data) {
		    alert('videos');
		    console.log(data);
		  });

		  $('.view-html').bind('append', function(e, data) {
		    alert('html');
		    console.log(data);
		  });

		});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class='view-images'>images</button>
<button class='view-videos'>videos</button>
<button class='view-html'>html</button>

1

Сделайте срабатывания кнопок по клику и выбирайте их по классу:

$('.view-images').click(function(){
         alert('images');
});

$('.view-videos').click(function(){
      alert('videos');
});

$('.view-html').click(function(){
      alert('html');
});
2
  • .bind() кстати лучше не использовать, так как он не срабатывает на элементах появившися после его установки 27 июл 2016 в 12:01
  • точно, прошляпил, момент с биндом динамических элементов.
    – lampa
    27 июл 2016 в 13:31
0

Можно навесить обработчик вот так, код заработает:

$('button').click(function(){
  $(this).trigger('append')
})

$('.view-images').bind('append', function(e, data) {
	alert('images');
});
	
$('.view-videos').bind('append', function(e, data) {
	alert('videos');
});
	
$('.view-html').bind('append', function(e, data) {
	alert('html');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='view-images'>images</button>
<button class='view-videos'>videos</button>
<button class='view-html'>html</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.