Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.11.2013, 22:40
Новичок на форуме
Отправить личное сообщение для farand_777 Посмотреть профиль Найти все сообщения от farand_777
 
Регистрация: 14.11.2013
Сообщений: 3

Не работает событие.
Помогите. Не работает событие
$(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');
               });
           }
           
       }); 
   });
Ответить с цитированием
  #2 (permalink)  
Старый 14.11.2013, 23:47
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

В 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');
});

Последний раз редактировалось mi.rafaylik, 15.11.2013 в 10:39.
Ответить с цитированием
  #3 (permalink)  
Старый 15.11.2013, 00:04
Новичок на форуме
Отправить личное сообщение для farand_777 Посмотреть профиль Найти все сообщения от farand_777
 
Регистрация: 14.11.2013
Сообщений: 3

<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; }

Последний раз редактировалось farand_777, 15.11.2013 в 00:07.
Ответить с цитированием
  #4 (permalink)  
Старый 15.11.2013, 00:19
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

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

Последний раз редактировалось mi.rafaylik, 15.11.2013 в 00:25.
Ответить с цитированием
  #5 (permalink)  
Старый 15.11.2013, 00:21
Новичок на форуме
Отправить личное сообщение для farand_777 Посмотреть профиль Найти все сообщения от farand_777
 
Регистрация: 14.11.2013
Сообщений: 3

Спасибо. Буду пробывать
Ответить с цитированием
  #6 (permalink)  
Старый 15.11.2013, 01:24
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

farand_777,
Ещё один момент. Если используете ссылку как контроллер (без перехода), то вместо
<a class="del" href="#">Удалить таблицу</a>
можно использовать css:
Посмотреть
.del {
	cursor:pointer;
	text-decoration:underline;
	color:blue;
}
<a class="del">Удалить таблицу</a>
Визуально она будет выглядеть как обычная ссылка, но при этом в адресной строке не будет добавляться хэш (#)

Последний раз редактировалось mi.rafaylik, 15.11.2013 в 10:04.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ajax при заходе на страницу из поисковика - не работает Алексей_ГР Ваши сайты и скрипты 2 03.09.2013 00:03
Событие click Гробовщик jQuery 1 31.07.2013 07:28
Помогите не работает событие motoroller jQuery 2 01.04.2011 23:38
Doctype и javascript: не работает событие в Internet exproler nastya Internet Explorer 0 23.03.2011 12:26
ява-скрипт выборочно работает-не работает zeta777 Internet Explorer 0 20.01.2010 11:41