Question

我有一个jQuery Ajax调用，用于将表单值发送到PHP处理脚本。此调用由模态中的按钮触发。表单值本身是以前的Ajax调用的结果。我知道如何使用.on（）确保click事件对动态生成的内容有效，但我不知道如何确保文档识别dyanamic表单元素。有什么提示吗？

    $(document).on('click', '#goupdatenews', function(e){
        e.preventDefault();
        $(this).foundation('reveal', 'close'); // close modal
        $.ajax({
            type: 'GET',
            url: 'actions/ajax/editnewsajax.php',
            data: {
                newsArticleTitle: $('#news_article_title').val(), 
                newsArticleContent: $('#news_article_content').val(),
                newsPostDate: $('#news_post_date').val(),
                leagueID: $('#modal_league_id').val(),
                teamID: $('#modal_team_id').val(),
                articleID: $('#this_article_id').val()
            }
        }).done(function(html) {
            $('#newsposterror').replaceWith(html);
        });
    });

为了澄清，此脚本将提交一篇经过编辑的文章，该文章将数据发送到数据库更新例程（editnewsajax.php）。数据在先前的ajax调用中从数据库加载，并动态写入模态窗口。

更多代码：这是数据源，它通过之前的ajax调用动态写入模态窗口。这是PHP。

$articleID = (!empty($_GET['articleID'])) ? $_GET['articleID'] : '';
    if(!empty($articleID)){
        $newsArticle = $db->rawQuery("SELECT * FROM news WHERE id = ?", array($articleID));
        echo "
            <div id='editnewscontent'>
                <div>
                    <label for='news_article_title'>Article Title</label>
                    <input type='text' name='news_article_title' value='{$newsArticle[0]['news_title']}' id='news_article_title' required />
                </div>
                <div>
                    <label for='news_post_date'>Post Date</label>";
        if($newsArticle[0]['post_date'] > $today){
            echo "
                    <label for='news_post_date' style='color:#ff0000'>This article has not yet been posted</label>";
        }
        echo "
                    <input type='text' name='news_post_date' value='{$newsArticle[0]['post_date']}' id='news_post_date' class='datepicker' data-date-format='yyyy-mm-dd' />
                </div>
                <div>
                    <label for='news_article_content'>Article Content</label>
                    <textarea name='news_article_content' value='' id='news_article_content' style='min-height:150px' required>{$newsArticle[0]['news_description']}</textarea>
                </div>
                <input type='hidden' name='modal_league_id' id='modal_league_id' value='{$newsArticle[0]['league_id']}' />
                <input type='hidden' name='modal_team_id' id='modal_team_id' value='{$newsArticle[0]['team_id']}' />
                <input type='hidden' name='this_article_id' id='this_article_id' value='{$articleID}' />
            </div>";
    }

这是来自ajax电话的GET参数。请注意，ArticleID有一个值，但没有别的。即使这些元素在屏幕上可见，并且存在于源代码中。

articleID   14
leagueID    
newsArticleContent  
newsArticleTitle    
newsPostDate    
teamID

Answer 1

看起来你在获得输入值并进行ajax调用之前关闭了模态。我认为这可能是问题所在。

就个人而言，在ajax调用成功之前我不会关闭模态，但你可以尝试：

$(document).on('click', '#goupdatenews', function(e){
    e.preventDefault();
    var data = {
        newsArticleTitle: $('#news_article_title').val(), 
        newsArticleContent: $('#news_article_content').val(),
        newsPostDate: $('#news_post_date').val(),
        leagueID: $('#modal_league_id').val(),
        teamID: $('#modal_team_id').val(),
        articleID: $('#this_article_id').val()
    };
    $(this).foundation('reveal', 'close'); // close modal
    $.ajax({
        type: 'GET',
        url: 'actions/ajax/editnewsajax.php',
        data: data
    }).done(function(html) {
        $('#newsposterror').replaceWith(html);
    });
});

Answer 2

这个问题的答案结果证明是非常愚蠢的 - 在Ajax调用中提到的ID选择器结果并不是唯一的。将ID更改为其他名称会修复所有内容。

Mods，随意删除 - 这个问题中没有任何内容可以让我或其他任何人找到正确的解决方案。

jQuery ajax - 无法发布动态内容

2 个答案: