Question

我正在开展一个小项目，它涉及显示新闻源。该新闻源使用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弹出框内。因此，当用户点击另一个链接时，会显示弹出窗口。通常这个弹出窗口是隐藏的。

我想在我的html中使用带有该表单的ajax。所以我开始构建表单并在div id的结束div标签之后添加此代码，'form'。

<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 for http://alexkonetchy.com/example/modalPopLite.php和http://alexkonetchy.com/example/popup.php

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

请注意，javascript或css代码都不是我的

Answer 1

我为你创建了一个小小提琴演示。您必须阻止默认按钮单击事件。

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

http://jsfiddle.net/K3fxq/

jQuery里面的html体

1 个答案: