Question

我不知道为什么.on（'click'）代码无法与选择器一起使用无论我更改选择器，这段代码都无法正常工作

 $(function () {
    $('.todolist input').on('keydown', function(e){
       if(e.keyCode == 13){
           $('<li>' + $(this).val() + '<i class="fas fa-times"></i></li>').appendTo($('.todolist ul'))
           $(this).val('');
       }
    })
})

$(function () {
    $('.todolist .fa-times').on('click', 'li i', function() {
        $(this).parent('li').css('text-decoration', 'line-through').delay(200).fadeOut(300, function () {
        $(this).parent('li').remove();
        });

    });
});

此代码在没有选择器的情况下可以正常工作

 $(function () {
    $('.todolist .fa-times').on('click', function() {
        $(this).parent('li').css('text-decoration', 'line-through').delay(200).fadeOut(300, function () {
        $(this).parent('li').remove();
        });

    });
});

我正在做一个待办事项，我想在用jQuery创建的任何<li>之后，单击图标（x）删除它

<div class="container">
<div class="todolist">
    <h3>To Do List:</h3>
    <ul>
        <li>Learning JQuery<i class="fas fa-times"></i></li>
        <li>Codeing My 1st Site<i class="fas fa-times"></i></li>
        <li>Learning Angular js<i class="fas fa-times"></i></li>
        <li>Learning SAS<i class="fas fa-times"></i></li>
        <li>More Training<i class="fas fa-times"></i></li>
    </ul>
    <input type="text" placeholder="Add New Task">
</div>

Answer 1

您的委派事件处理程序同时具有选择器和委派：

$('.todolist .fa-times').on('click', 'li i', function() {

li i不是.fa-times（即$(".todolist .fa-times li i").length === 0)）的子节点

更改为

$('.todolist').on('click', 'li i.fa-times', function() {

或者只是：

$('.todolist').on('click', '.fa-times', function() {

Answer 2

尝试删除选择器中的空间：

@Component
public class ApplicationStartup implements ApplicationListener<ContextRefreshedEvent> {

    String url = "http://localhost:8000/mailsourcerestcontroller/mailconnectors/";

    @Override
    public void onApplicationEvent(final ContextRefreshedEvent event) {

        try {

            RestTemplate restTemplate = new RestTemplate();

            HttpEntity<String> request = new HttpEntity<String>(getHeaders());
            ResponseEntity response = restTemplate.exchange(url, HttpMethod.GET, request, String.class);
            String usersMap = (String) response.getBody();

        } catch (Exception e) {
            e.printStackTrace();
            ;
        }
    }

    private static HttpHeaders getHeaders(){
        String plainCredentials="restclient:restpassword";
        String base64Credentials = new String(passwordEncoder().encode(plainCredentials));

        HttpHeaders headers = new HttpHeaders();
        headers.add("Authorization", "Basic " + base64Credentials);
        headers.setAccept(Arrays.asList(MediaType.APPLICATION_JSON));
        return headers;
    }

    public static BCryptPasswordEncoder passwordEncoder() {
        BCryptPasswordEncoder bCryptPasswordEncoder = new BCryptPasswordEncoder(8);
        return bCryptPasswordEncoder;
    }

}

编辑：

$(function () { $('.todolist.fa-times').on('click', function() { $(this).parent('li').css('text-decoration', 'line-through').delay(200).fadeOut(300, function () { $(this).parent('li').remove(); }); }); });事件绑定仅在选择现有元素时才有效。此问题可以通过多种方式解决，您可以在创建元素后重新绑定事件，从父级委派事件，也可以将它们直接绑定到$(element).on('click',...)。

示例：

document

尝试添加选择器而不与我一起工作

2 个答案: