$ (this) .addClass не работает

Выполняя следующие действия, я вижу, что таблица стилей не применяется к щелканному элементу в списке. Что может быть возможной причиной?

Следующий пример работает таким образом, если в текстовое поле добавлена строка, а затем нажата кнопка, в список добавляется новый элемент. Если щелкнуть элемент в списке, его следует погладить.

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#taskText').keydown(function (evt) { 
       if (evt.keyCode == 13) { 
        addTask(this, evt); 
       } 
      }); 

      $('#addTask').click(function (evt) { 
       addTask(document.getElementById('taskText'), evt); 
      }); 

      // following statements not working 

      $('#tasks li').live('click', function(evt) { 
       $(this).addClass('done'); 

      });}); 

     function addTask(textBox, evt) { 
      evt.preventDefault(); 
      var taskText = textBox.value; 
      $('<li>').text(taskText).appendTo('#tasks'); 
      textBox.value = ""; 
     }; 
    </script> 
    <style type="text/css"> 
     .done{ 
      text-decoration:line-through; 
     } 
    </style> 
</head> 
<body> 
    <ul id="tasks"> 
    </ul> 
    <input type="text" id="taskText" /> 
    <input type="submit" id="addTask"/> 

</body> 
</html>

источник

2016-01-11 Chanchal

изменения Try ' $ ('# tasks li'). live ('click', function (evt) { $ (this) .addClass ('done'); });}); 'to' $ ('# tasks li') .on ('click', function (evt) { $ (this) .addClass ('done'); });}); ' – vanhonit

Большое спасибо за ответ. Протестировано, но, к сожалению, это не сработало. – Chanchal

Как упоминалось ceejayoz. live() function был удален в jQuery 1.7 и вообще не существует в jQuery 2.x.

Причина ваш щелчок по списку не работает лучше объяснить на этот вопрос: Click event on dynamically generated list items using jquery

вот что код может выглядеть для вас

$(document).ready(function() { 
 
    $('#taskText').keydown(function(evt) { 
 
    if (evt.keyCode == 13) { 
 
     addTask(this, evt); 
 
    } 
 
    }); 
 

 
    $('#addTask').click(function(evt) { 
 
    addTask($('#taskText'), evt); 
 
    }); 
 

 

 
    $('#tasks').on('click', 'li', function(evt) { 
 
    $(this).addClass('done'); 
 
    }); 
 
}); 
 

 
function addTask(textBox, evt) { 
 
    evt.preventDefault(); 
 
    var taskText = textBox.val(); 
 
    $('<li>').text(taskText).appendTo('#tasks'); 
 
    textBox.val(""); 
 
};

.done { 
 
    text-decoration: line-through; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="tasks"> 
 
</ul> 
 
<input type="text" id="taskText" /> 
 
<input type="submit" id="addTask" />

источник

2016-01-11 02:57:58 Pindo

Спасибо Pindo Это прекрасно работает! – Chanchal

live() function был удален в JQuery 1.7 и не существует вообще в JQuery 2.x.

Если вы проверили консоль разработчика своего браузера, скорее всего, вы увидите сообщение об ошибке в этих строках.

источник

2016-01-11 02:25:36 ceejayoz

Спасибо за ответ. Любая альтернатива этому? – Chanchal

@Chanchal Первая строка этой документации - «Использовать .on() для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать .delegate(), предпочитая .live()». – ceejayoz

Это было отмечено как лучший ответ? Ваша проблема решена @chanchal? – AmJustSam

$(document).ready(function() { 
 
    $('#addTask').click(function() { 
 
    var taskText = $('#taskText').val(); 
 
    var li = $('<li>' + taskText + '</li>'); 
 
    $('ul#tasks').append(li); 
 
    $('#taskText').val(''); 
 
    $(li).click(function() { 
 
    $(this).toggleClass('done'); 
 
    }); 
 
    }); 
 
});

li { 
 
    font-family: arial; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-font-smoothing: antialiased; 
 
} 
 

 
.done{ 
 
    text-decoration: line-through; 
 
    color: red; 
 
}

<!DOCTYPE html>  
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head>  
 
<body> 
 
    <ul id="tasks"> 
 
    <!-- List Goes Here... --> 
 
    </ul> 
 

 
    <!-- Textbox/Input Buttons --> 
 
    <input type="text" id="taskText" /> 
 
    <input type="submit" id="addTask"/> 
 

 
</body> 
 
</html>

источник

2016-01-11 02:33:23 AmJustSam

Я попробовал предложенный, но, к сожалению, это не сработало. – Chanchal

Попробуйте второй, и если это все еще не работает. то если вы не возражаете, можете ли вы привести пример своего кода в codepen.io? – AmJustSam

Пожалуйста, найдите его здесь. – Chanchal

$('#tasks li').click(function(){ 
    $(this).addClass('class-name'); 
};

должен работать. Убедитесь, что все ваши синтаксисы верны (например, случайные точки с запятой)

источник

2016-01-11 02:43:42

$ (this) .addClass не работает

ответ

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