javascript - Ajax加载一个html文件，然后添加一个值

Question

您好，我这里有一个名为 individual.html 的文件:

<form id="form_personal">
    <div class="row" style="">
        <div class="row">
            <div class="small-12 columns">
                <label class="">Username:</label>
            </div>
            <div class="small-12 columns">
                <input type="text" name="username" id="us"/>
            </div>

            <div class="small-12 columns">
                <button id="submit" type="submit" class="success button">Submit</button>
            </div>  
        </div>  
    </form>

从上面的代码中可以看到，我有一个名为“us”的id。所以这就是我试图通过 ajax 实现的目标，但它不起作用，我的

<div class="atest"></div>

实际上位于一个名为profile.html的文件中。因此，我通过 AJAX 加载将 individual.html 包含到 profile.html 中。

$.ajax({

    url: 'some params, ignore this',
    dataType: 'ignore this',
    success: function(r)
    {
        $('.atest').load('personal.html');


    }
}).done(append);

function append()
{
    // alert();
    $('#us').val('test');
}

我正在尝试将“test”的值放入我的

<input type="text" name="username" id="us"/>

它位于personal.html 文件中，我如何实现它？

Answer 1

您需要等到personal.html完全加载，为此您应该使用JQuery load方法的完整回调，如下所示:

$('.atest').load('personal.html', function() {
    //this will run after personal.html has loaded.
    //Do your stuff here
});