Question

我有一个pop表单似乎没有将提交数据发送到jquery。我究竟做错了什么？用于创建弹出窗口的脚本

<script type="text/javascript">
    $(document).ready(function() {
        $('.popover-markup>.trigger').popover({
            html: true,
            title: function() {
                return $(this).parent().find('.head').html();
            },
            content: function() {
                return $(this).parent().find('.content').html();
            }
        });
    });
</script>

弹出窗口中填充的表单

<div class="popover-markup"> 
    <a href="#" class="trigger btn btn-success">Add Your Genre</a> 
    <div class="head hide">Add Genre</div>
    <div class="content hide">
        <form method="post" action="" id="genreupdate">
            <div class="form-group">
                <select class="form-control">
                    <?php foreach($allgenres as $key=>$value) { ?>
                    <option value="<?php echo $key; ?>">
                        <?php echo $value;?>
                    </option>
                    <?php } ?>
                </select>
            </div>
            <button type="submit" class="btn btn-default btn-block">Submit</button>
    </form>
    <div class="footer hide">test</div>
</div>

JQUERY将数据发送到表

<script>
    $(document).ready(function() {
        $("genreupdate").submit(function(e) {
            var genreid = $('#genreupdate').val();
            alert(genreid);
            var user = <? php echo AuthComponent::user('id'); ?> ;
            var targeturl = 'http://www.website/users/update';
            //alert(targeturl);
            .popover-markup('destroy');
            $.ajax({
                dataType: "html",
                type: "POST",
                data: {
                    genre_id: genreid,
                    user_id: user
                },
                evalScripts: true,
                url: targeturl,
                success: function() {
                    // Handle the complete event
                    var result = "Thanks for updating your fans";
                    $("#genreupdated").fadeOut(2000).html(result);
                    $(".genreid").val('');
                    document.location.reload();
                }
            })
        });
    });
</script>

我点击提交没有任何反应。

Answer 1

脚本中几乎没有问题，我不确定它是否能解决您的问题，但语法错误可能会得到解决！

更正ID选择器$("genreupdate")至$("#genreupdate")
对于动态内容，我们应该使用delegated events来帮助您将事件从文档传递到后代选择器。
行$('.popover-markup>.trigger').popover('destroy');已更正，已移至已完成方法。
您的HTML格式不正确，我已删除了额外的div关闭并在Qn中更新了它。

<强>脚本：

  $(function () {
      $(document).on('submit',".popover form#genreupdate",function (e) {
          var genreid = $('#genreupdate').val(),
              user = <? php echo AuthComponent::user('id'); ?> ,
              targeturl = 'http://www.website/users/update';

          $.ajax({
              url: targeturl,
              dataType: "html",
              type: "POST",
              data: {
                  genre_id: genreid,
                  user_id: user
              },
              evalScripts: true
          }).done(function () {
              // Handle the complete event
              var result = "Thanks for updating your fans";
              $("#genreupdated").fadeOut(2000).html(result);
              $(".genreid").val('');
              document.location.reload();
             $('.popover-markup>.trigger').popover('destroy');
          });
      });
  });

注意：id = genreupdated

Answer 2

只需改变：

$('#genreupdate') => $(".popover-content #genreupdate")

像：

 $(".popover-content #genreupdate").submit(....);

您使用的所有地方：

$('#genreupdate')

Jquery Ajax弹出窗体不发送数据

2 个答案: