jQuery - динамически загружать форму и отправлять с AJAX

Question

Я пытаюсь загрузить форму в диалог, используя .load(url), а затем включив AJAX для отправки на нее. Он загружает форму в диалог, но кажется, что он полностью игнорирует мой код jQuery и просто отправляет его с обновлением страницы.

Я использую код AJAX на нескольких сайтах (не динамический), и он работает так, как задумано.

Здесь я покажу вам код:

javascript.js; завернутый в ready () для отправки динамической формы

$("#dbsearch").submit(function(event) {
    alert('click!');
    var data = $("#dbsearch").serialize();
    $.ajax({
        url: 'ajax.php',
        type: 'POST',
            data: data,
            success: function(response) {
                alert(response);
            }
    });

    event.preventDefault();
});

form.php; загружается в модал

<form method="post" id="dbsearch">
    <div class="form-group col-xs-12 col-md-12">
        <label for="method" class="control-label">Search By</label>
        <select class="form-control" id="method" name="method">
            <option>Choose...</option>
            <option value="content-type">Search By Name</option>
            <option value="release-date">Search By Release Date</option>
        </select>
    </div>
    <div class="form-group col-xs-12 col-md-12">
        <label for="value" class="control-label">Value</label>
        <input type="text" value="" class="form-control" id="value" placeholder="Enter a term...">
    </div>
    <div class="form-group col-xs-12 col-md-12">
        <input type="submit" value="Search" class="btn btn-primary btn-block">
    </div>
</form>

Что может быть причиной этого? Это потому, что он динамически загружается в диалог? Если да, то как лучше всего решить эту проблему?

---

Обновлен код JS

$("#dbsearch").delegate("#dbsearch input[type=submit]", "click", function(event) {
    alert('click!');
    var data = $("#dbsearch").serialize();
    $.ajax({
        url: 'ajax.php',
        type: 'POST',
            data: data,
            success: function(response) {
                alert(response);
            }
    });

    event.preventDefault();
});

Answer 1

Вы можете загрузить свой код в элемент вашего диалогового контейнера, используя метод "html", он загрузит ваши функции js в браузер.

$.get(url, function(result){
   $('mydialogdiv').html(result);
});

Answer 2

Это происходит потому, что вы используете прямой обработчик события вместо делегированного обработчика события. Делегирование событий позволяет нам присоединить прослушиватель событий к элементам, которые существуют сейчас или в будущем.

https://learn.jquery.com/events/event-delegation/

Пример (не тестировался):

$("#dbsearch").delegate("#dbsearch input[type=submit]", "click", function(event) {
  // Your code here
  event.preventDefault();
});