Отдельная страница Кнопка Ajax Функциональность

Question

Я пытаюсь загрузить страницу, которую я создал, используя ajax, которая загружается нормально и все.У меня проблема в том, что у страницы, которую я загружаю в диалог, есть кнопка обновления в форме, которую она отображает.Эта кнопка не работает, поскольку она просто перенаправляет на страницу, на которой я в данный момент, без обновления.

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

Это мой запрос ajax, который работает и загружает нужную мне страницу.

$('[data-label="button_edit"]').bind('click', function(){
        temp = $(this).attr('id');
        contact_id = temp.split('-');
        $.ajax({
            type: 'post',
            url: 'admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id='+ contact_id[1] + '&form_only=true' ,
            success:( function(data) {
                $('#edit_contact_form').html(data).dialog({
                    width: 1500,
                    height: 700
                });
            })
        });
        return false;
    });


<td data-label="form_only" class="-left-side">
                <form action="" method="post" name="form" id="form">
                    <span data-label="footprint_alerts">footprint_alerts</span>
                    <table class="span-17 -form">
                        <thead>
                            <tr>
                                <th colspan="2">Contact Information</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="-field-label" width="120">Is Default:</td>
                                <td class="-field">
                                    <select size="1" data-field="is_default" name="is_default">
                                        <option value="yes">yes</option>
                                        <option value="no">no</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label -required">Contact Method:</td>
                                <td class="-field">
                                    <select name="method" data-field="method">
                                        <option value="">-- Select a Contact Method --</option>
                                        <option value="phone">Phone</option>
                                        <option value="email">E-Mail</option>
                                        <option value="form">Form</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label">Email Address:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="128" size="30" name="email" data-field="email" />
                                    <div data-label="email_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label">Email Address Alt:</td>
                                <td class="-field">
                                    <input type="text" value="" size="30" name="email_alt" data-field="email_alt" /><br/>
                                    <small class="-lite">This field accepts comma separated e-mail address lists. (ie. john.smith@gmail.com, john.smith@yahoo.com, john.smith@hotmail.com)</small>
                                    <div data-label="email_alt_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label">URL:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="1024" size="45" name="url" data-field="url" />
                                    <div data-label="url_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label">URL Alt:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="1024" size="45" name="url_alt" data-field="url_alt" />
                                    <div data-label="url_alt_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label">Job Title:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="45" size="20" name="job_title" data-field="job_title" />
                                    <div data-label="job_title_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label">Company Name:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="45" size="25" name="name_company" data-field="name_company" />
                                    <div data-label="name_company_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label -required">First Name:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="45" size="25" name="name_first" data-field="name_first" />
                                    <div data-label="name_first_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label">Middle Name:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="45" size="25" name="name_middle" data-field="name_middle" />
                                    <div data-label="name_middle_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label -required">Last Name:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="45" size="25" name="name_last" data-field="name_last" />
                                    <div data-label="name_last_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label">Phone:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="20" size="20" name="phone" data-field="phone" />
                                    <div data-label="phone_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label">Phone Alt.:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="20" size="20" name="phone_alt" data-field="phone_alt" />
                                    <div data-label="phone_alt_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label">Address:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="45" size="25" name="address" data-field="address" />
                                    <div data-label="address_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label">Address 2:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="45" size="25" name="address_alt" data-field="address_alt" />
                                    <div data-label="address_alt_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label">City:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="45" size="25" name="city" data-field="city" />
                                    <div data-label="city_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-field-label">Zip:</td>
                                <td class="-field">
                                    <input type="text" value="" maxlength="10" size="10" name="zip" data-field="zip" />
                                    <div data-label="zip_container"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="-label">&#160;</td>
                                <td class="-field">
                                    <input type="submit" data-field="button_new" value="Create New" name="action" class="-alt"/>
                                    <input type="submit" value="Update" name="action" data-field="button_update" />
                                    <input type="submit" value="Delete" name="action" data-field="button_delete" />
                                </td>
                             </tr>
                        </tbody>
                    </table>
                </form>
            </td>

-Edit- Я нашел решение проблемы, с которой столкнулся, и хотел поделиться ею

$('[data-label="button_edit"]').bind('click', function(){           
        temp = $(this).attr('id');
        contact_id = temp.split('-');
        $.ajax({
            type: 'post',
            url: 'admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id='+ contact_id[1] + '&form_only=true' ,
            success:( function(data) {
                contactForm = $('#edit_contact_form_container').html(data);
                $('#contact_form').find('[data-field="button_update"]').css('visibility','hidden');
                $('#contact_form').bind('submit', function(){
                    $.post('admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id='+ contact_id[1] + '&form_only=true&action=Update Contact',$('#contact_form').serialize());
                    contactForm.dialog('close');
                });
                contactForm.dialog({
                    width: 700,
                    height: 700,
                    title: 'Edit Contact Information',
                    buttons: {
                        "Go To Contacts Page": function(){
                            location.href='admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id=' + contact_id[1];
                        },
                        "Update Contact": function(){
                            $.post('admin/contacts/add-edit.php?fk_pivot_table=&fk_pivot_id=&contact_id='+ contact_id[1] + '&form_only=true&action=Update Contact',$('#contact_form').serialize());
                            contactForm.dialog('close');
                            window.location.reload();
                        }
                    }
                });
            })
        });
        return false;
    });

Answer 1

На основании информации о том, что кнопки работают на отдельной странице.Если у них есть скрипт в автономном режиме, событие готовности уже произошло на главной странице, где находится диалог, поэтому, если скрипт не загружается после нового html, он будет запущен преждевременно.

Вы можете вызвать тот же скрипт в том же самомУспех ajax, когда вы создаете диалоговое окно (после загрузки нового html-файла в диалоговом окне) или убедитесь, что тег сценария на загруженной странице соответствует HTML-адресу, на который он ссылается