На элементах DOM не работает событие onclick

212

03 февраля 2020, 00:20

Динамически добавляю элементы на страницу:

$(document).ready(function(){
    if($('.table tbody').empty()){        
        getBooks();
    }
    $("#all-books-btn").on("click", function(){
        getBooks();
    });
});
var getBooks = function(){
    $.ajax({
        url: "/database/getAllBooks.php",
        dataType: "json",
        success: function(result){
            if(result){
                $(".table tbody").empty();
                var res = "";
                for(var i = 0; i < result.title.length; i++){
                    res += "<tr>" +
                        "<td class='id' scope='row'>" + result.id[i] + "</td>" +
                        "<td class='book-title'>" + result.title[i] + "</td>" +
                        "<td class='author'>" + result.author[i] + "</td>" +
                        "<td class='reader'>" + result.reader_id[i] + "</td>" +
                        "<td class='date'>" + result.date[i] + "</td>" +
                        "<td>" +
                            "<a href='#' class='btn btn-primary btn-sm mt-1 changeBook'>Change</a>" +
                            "<button type='button' class='btn btn-danger btn-sm mt-1 deleteBook'>Delete</button>" +
                            "<a href='http://libman/pages/readers.php' class='btn btn-success btn-sm mt-1'>View reader</a><br>" +
                            "<a href='http://libman/pages/setReader.php' class='btn btn-info btn-sm mt-1'>Set reader</a>" +
                            "<button class='btn btn-warning btn-sm mt-1'>Unset reader</button>" +
                        "</td>" +
                    "</tr>";
                }
                $(".table tbody").append(res);
            }
        }
    });
}

Не срабатывает событие нажатия на элемент, выведенный динамически, ошибок нет:

$(document).ready(function(){
    $(".changeBook").on('click', function(){
        console.log('click');
    });    
});

Cтраница вывода:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Library manegement</title>
    <link href="bootsrap/css/bootstrap.css" rel="stylesheet">
    <link href="/css/index_style.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3 mt-3" id="title">Library manegement</div>
            <div class="col-md-6 mt-3"></div>
            <div class="col-md-1 mt-3 menu">Books</div>
            <a href="/pages/readers.php" class="col-md-1 mt-3 menu">Readers</a>                
        </div>
    </div> 
    <div class="container">
        <div class="row mt-5">
            <div class="col-md-2">
                <select id="book-params" class="form-control">
                    <option value="all">All</option>
                    <option value="id">Id</option>
                    <option value="book-title">TItle</option>
                    <option value="author">Author</option>
                    <option value="reader">Reader</option>
                    <option value="date">Date</option>
                </select>
            </div>
            <div class="col-md-7 ml-2">
                <div class="input-group">
                    <span class="input-group-text">Find</span>
                    <input type="text" class="form-control" id="find-books">
                </div>
            </div>
            <div class="col-md-1 ml-3">
                <div class="btn btn-success" id="all-books-btn">All books</div>
            </div>
            <div class="col-md-1 ml-4">
                <a href="pages/addBook.php" class="btn btn-success">Add book</a>
            </div>
        </div>
        <table class="table table-striped mt-5">
            <thead>
              <tr>
                <th scope="col">Id</th>
                <th scope="col">Title</th>
                <th scope="col">Author</th>
                <th scope="col">Reader</th>
                <th scope="col">Date</th>
                <th scope="col">Actions</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>          
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/find.js"></script>
    <script type="text/javascript" src="js/getAllBooks.js"></script>
    <script type="text/javascript" src="js/changeBook.js"></script>
</body>
</html>

Помогите понять в чём проблема.

Answer 1

$(".table tbody").on('click', ".changeBook", function(){
  console.log('click');
});

Как Вы думаете, вот это что делает?

if($('.table tbody').empty()){        
    getBooks();
}

Правильно:

if($('.table tbody tr').length == 0){        
    getBooks();
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Jquery показать вложенную таблицу при клике по tr

Имеется следующий макет

203

HTML

Найти и переместить элемент

Есть форма ввода:

207

HTML

Не отображаются формы Django на странице

Уже долго вожусь с данной проблемой, нигде не смог найти решениечувствую, что ответ на поверхности, надеюсь тут помогут

190

HTML

Как изменить Event в Owl Carousel 2 в Scrollify

Всем привет!

173