jQuery Mobile всплывающее окно работает только при начальной загрузке страницы

Question

jQuery Mobile всплывающее окно работает только при начальной загрузке страницы

0

У меня очень простая форма, которая отображает одно поле. Когда вы нажимаете на значение и нажимаете submit, он дает вам список флажков. Вы проверяете некоторые, а затем нажмите другую кнопку ниже и отобразите сообщение об успешном завершении/сбое.

Я пытаюсь преобразовать это в мобильное приложение jQuery, но у меня ничего, кроме проблем. Например, я могу прагматично вызывать всплывающее окно, используя $("#element").popup("open"); когда первая страница загружается, но после сообщения, когда я вызываю всплывающее окно, как показано выше, я вижу изменение URL, но всплывающее окно не видно, и это почти точно та же самая страница. Я также попытался просто разместить флажки на вторичном URL (/update), а затем использовать перенаправление HTTP на исходную страницу, но каким-то образом jQuery Mobile нарушает это.

Я вставил большую часть кода ниже. Если кто-нибудь может указать мне в правильном направлении, что все, что я ищу.

<!DOCTYPE html>
<html>
<head>
    <title>Search</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>

    <script type="text/javascript">
    $(document).on("pagecreate", function() {
        $(document).on("click", "#button", function(e) {
            // Do ajax stuff here
            $("#popupBasic").popup("open");
        });           
    });     
    </script>
</head>
<body>
<div id="lookup" data-role="page">
   <div data-role="header">
    <h1>Lookup Order</h1>
    </div>

    <div data-role="content">   
    <?php if (validation_errors()): ?>
    <div class="errors"><?=validation_errors()?></div>
    <?php endif; ?>

    <?php if ($this->session->flashdata('error')): ?>
    <div class="errors"><?=$this->session->flashdata('error')?></div>
    <?php endif; ?>

    <form method="post" id="search_form" action="/search">
    <label for="term">Term:</label>
    <input type="number" data-clear-btn="true" name="term" id="term" value="<?=set_value('term')?>" />  
    <input type="submit" value="Search" />
    </form>


    <?php if (!empty($fish) && $fish->num_rows()): ?>
    <form method="post" action="/update">
    <br /><strong>Species:</strong> <?=$species?><br />
    <hr />
    <a href="#" class="uncheckall">Uncheck All</a> / <a href="#" class="checkall">Check All</a><br />

    <?php foreach ($fish->result_array() as $k => $f): ?>

        <fieldset data-role="fishgroup">
        <?php if (!$f['is_deleted']): ?>
            <input type="checkbox" name="fish[]" id="checkbox-<?=$f['id']?>" value="<?=$f['id']?>" checked="checked" />
        <?php else: ?>
            <input type="checkbox" name="fish[]" id="checkbox-<?=$f['id']?>" value="<?=$f['id']?>" checked="checked" disabled="disabled" />
        <?php endif; ?>

        <label for="checkbox-<?=$f['id']?>">
            <?php if ($f['type']): ?>
            <?= $f['1'] ?> <?= $f['2'] ?> Attr: <?= $f['3'] ?> Attr: <?= $seat['4'] ?>
            <?php else: ?>
            <?= $f['3'] ?> <?= $f['4'] ?>
            <?php endif; ?>
        </label>
        </fieldset>
    <?php endforeach; ?>
    <a href="#" class="uncheckall">Uncheck All</a> / <a href="#" class="checkall">Check All</a><br /><br />

    <input type="button" value="Update Fish(s)" id="button" />
    </form> 
    <?php endif; ?>

    <div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.</p>
    </div>  
    </div> <!-- end content -->
</div><!-- end page -->  

</body>
</html>

Используя следующее, вы не можете дважды вызвать вызов обработчика кликов, но я не получаю фактическое всплывающее окно после начальной загрузки страницы:

$(document).off("click").on("click", "#button", function() {
    $(" #popupBasic").popup("open");
});

Все, что я получаю, это #&ui-state=dialog добавленный к URL-адресу, и вызов $("#button").popup("close"); удаляет это.

JSP 13 май 2014, в 18:24

Источник

Теги:

javascript

jquery

jquery-mobile

1 ответ

Ещё вопросы

Matas Vaitkevicius · Answer 1 · 2014-05-13T14-17-00.000Z

Возможно, вы добавляете один и тот же обработчик несколько раз

    <script type="text/javascript">
$(document).on("pagecreate", function() {
    $("#button").off();
    $(document).on("click", "#button", function(e) {
        // Do ajax stuff here
        $("#popupBasic").popup("open");
    });           
});     
</script>

Похоже, что он вызывает его дважды, но $("#button").off(); ничего не исправить
@JSP В основном вам нужно добавить проверку, добавлен ли обработчик, и удалить и добавить его снова. Или предотвратить его добавление дважды, вы можете получить обработчики $ ("кнопка #"). Data ()