Форум

farand_777 · #1 (**permalink**) 14.11.2013, 23:40

Помогите. Не работает событие

$(del).delegate( 'click', function(){
         alert('Привет я DEL');
});

Все пробывал. .live .on .delegate ничего не помогает.

document.oncontextmenu = function() {return false;};
    $(document).ready(function() {
       $(document).mousedown(function(event) {
           $('.context-menu').remove();
           if (event.which === 3)  {
               var target = $(event.target);
               var add = '<li><a clas="add" href="#">Добавить таблицу</a></li>';
               var del = '<li><a class="del" href="#">Удалить таблицу</a></li>';
               $('<body>', {class: 'context-menu'}).css({
                   left: event.pageX+'px',
                   top: event.pageY+'px'
               })
               .appendTo('table')
               .append(
               $('<ul/>')
                   .append(add)
                   .append(del)
               )
                    .show('fast');
               $(del).delegate( 'click', function(){
                alert('Привет я DEL');
               });
           }
           
       }); 
   });

mi.rafaylik · #2 (**permalink**) 15.11.2013, 00:47

В jQuery обратиться к элементу можно через id, класс, имя тэга, или через ссылку на элемент (как в примере ниже).
А Вы в del присваиваете структуру, которая не является ничем из вышеперечисленного.
Используйте обёртку jQuery для создания элемента, раз уж юзаете фрэймворк:
Посмотреть

var del = $('<li><a class="del" href="#">Удалить таблицу</a></li>');
del.appendTo('body');
del.children('.del').on('click', function(){
	alert('Привет, я Del');
});

Или (если не нужно в дальнейшем ссылаться на элемент по ссылке в переменной) обращайтесь к элементу по классу:
Посмотреть

$('<li><a class="del" href="#">Удалить таблицу</a></li>').appendTo('body');
$('.del').on('click', function(){
	alert('Привет, я Del');
});

farand_777 · #3 (**permalink**) 15.11.2013, 01:04

<body>   
    <table border="1">
        <tr id="one">
            <td>Table</td>
            <td>Table</td>
            <td>Table</td>
            <td>Table</td>
            <td>Table</td>
        </tr>
        <tr id="two">
            <td>Table</td>
            <td>Table</td>
            <td>Table</td>
            <td>Table</td>
            <td>Table</td>
        </tr>     
    </table>
</body>

table {
    margin: 0 auto;
}
tr:hover {
    background: aqua;
}
/* Класс контекстного меню: */ 
.context-menu {
    position: absolute;
    display: none;
    background-color: #fff;  
    border: 1px solid #333;
    -moz-box-shadow: -5px 2px 10px rgba(0,0,0,0.5);     
    -webkit-box-shadow: -5px 2px 10px rgba(0,0,0,0.5);     
    box-shadow: -5px 2px 10px rgba(0,0,0,0.5); 
}  

    .context-menu ul { list-style: none; margin: 0; padding: 0; }              
    .context-menu ul li { margin: 0; padding: 0; background-color: #fff; display: block; }  

    .context-menu ul li a { color: #333; text-decoration: none; font-size: 12px; display: block; padding: 5px; }              
    .context-menu ul li a:hover { background-color: #eee; }

mi.rafaylik · #4 (**permalink**) 15.11.2013, 01:19

farand_777,
Обновите страницу и перечитайте моё предыдущее сообщение. Добавил примеры.

farand_777 · #5 (**permalink**) 15.11.2013, 01:21

Спасибо. Буду пробывать

mi.rafaylik · #6 (**permalink**) 15.11.2013, 02:24

farand_777,
Ещё один момент. Если используете ссылку как контроллер (без перехода), то вместо

<a class="del" href="#">Удалить таблицу</a>

можно использовать css:
Посмотреть

.del {
	cursor:pointer;
	text-decoration:underline;
	color:blue;
}

<a class="del">Удалить таблицу</a>

Визуально она будет выглядеть как обычная ссылка, но при этом в адресной строке не будет добавляться хэш (#)

Форум

Справочник

Discord чат

Курсы javascript