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也没有什么花哨的。标题类只是有一些填充，链接浮动到左边。这就是为什么最后有一门课程可以清除它们的原因。

但是有一个技术性。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 回答