0

私は小さなプロジェクトに取り組んでおり、ニュースフィードを表示する必要があります。そのニュース フィードは PHP ループで循環されますが、それは実際には問題ではありません。私が問題を抱えている領域は、html と jquery がすべてめちゃくちゃになっていることです。html はこのように設定されています。そして、それはそれ自体で完璧に機能します：

<div class="popup">
<div class="title">
    <a href="#" style="margin:0"><img src="" /></a>
    <a href="#"><?php echo $name; ?> &middot;</a>
    <div id="form">
        <form>
            <input type="hidden" name="event" value="123" />
            <input type="submit" name="reply" class="button" value="Respond" />
        </form>
    </div>
    <div class="clear"></div>
</div>
</div>

cssについても何も空想はありません。タイトル クラスには若干のパディングがあり、リンクは左に浮いています。そのため、最後にそれらをクリアするクラスがあります。

ただし、技術的な点が 1 つあります。div タイトルは jquery ポップアップ ボックス内にあります。したがって、ユーザーが別のリンクをクリックすると、ポップアップ div が表示されます。通常、このポップアップは非表示になっています。

HTMLでそのフォームでajaxを使用したい。そこで、フォームの作成を開始し、div id 'form' の終了 div タグの直後にこのコードを追加しました。

<script type="text/javascript">
    $(function() {  
      $(".button").click(function() {  
            //More  
      });  
    });  
</script>

そのコードをそこに入れるとすぐに、すべてが台無しになります。ポップアップ div が表示されるべきではないときに表示されます。これが起こっている理由がわかりません。jQueryでは正常ですか？誰もこの問題を抱えたことがありますか？助言がありますか？

ありがとうございました

編集

動作しない完全な html

<div id="popup" class="popup">  
<div class="popup-feed">
    <div class="feed-box">
        <div class="feed-box-title">
            <a href="#" style="margin:0"><img src="#" /></a>
            <a href="#">Alex &middot;</a>

            <div id="contact_form">
                <form>
                    <input type="hidden" name="event" value="<?php echo $status["id"]; ?>" />
                    <input type="submit" name="rsvp<?php echo $staus["id"]; ?>" value="<?php echo $rsvpStatus; ?>" />
                </form>
            </div>
<script type="text/javascript">
    $(function() {  
      $(".button").click(function() {  
            //More  
      });  
    });  
</script>
            <div class="clear"></div>
        </div>

        <div class="feed-content">
            <?php /*Content*/ ?>
        </div>
    </div>
</div>
</div><script type="text/javascript">$(function () { $('#popup').modalPopLite({ openButton: '#1', closeButton: '#close', isModal: false }); }); </script>

そのための JavaScript http://alexkonetchy.com/example/modalPopLite.phpおよびhttp://alexkonetchy.com/example/popup.php

css http://alexkonetchy.com/example/popup.css

そのjavascriptまたはcssコードは私のものではないことに注意してください

4

1 に答える 1

1

小さなフィドルのデモを作成しました。デフォルトのボタンクリックイベントを防止する必要があります。

$(function() {  
      $(".button").on('click', function(event) {  
            //More  
          alert('Your Ajax goes here');
          event.preventDefault();
      });  
    });

http://jsfiddle.net/K3fxq/

于 2013-03-24T18:02:41.253 に答える