jQuery仅在div中已存在时更改 [英] jQuery change only when it exists already in div

问题描述

我当前有一个页面，该页面的div带有ID，是一个是"和否"按钮.选择按钮后，jQuery会将ID中的信息替换为它调用的add_song.php文件.

I currently have page with a div with an ID surrounding a yes and no button. When the buttons are selected the jQuery replaces the info in the ID with add_song.php file that it calls.

当艺术家更改时，我在页面的下拉菜单中有一个实时change和实时keyup，它更改了add_song.php中的艺术家ID.问题是当我选择是"或否"时，如果更改艺术家名称，它将加载add_song.php.

I have a live change and live keyup on a drop down on the page when the artist changes it changes the artist ID in add_song.php. The problem is when I am selecting yes or no, if I change the artist name it loads add_song.php.

在单击是"或否"按钮后加载add_song.php后，如何仅允许change和keyup更改艺术家，而不是在change/add_song.php >.

How do I only allow change and keyup to change the artist when the add_song.php has been loading after the yes or no button click instead of it loading when the artist is changed on change / keyup.

这是PHP:

echo '<span class="edit-buttons"><input type="submit" value="yes" id="add_existing_song"></span>';
echo '<span style="padding-left:10px" class="edit-buttons"><input type="submit" value="no" id="add_new_song"></span>';
echo '<div id="display_add_new_song"></div>';

抱歉，这是jquery代码:

Sorry here is the jquery code:

$(document).ready(function(){
      $("#add_new_song").live("click", function() {
      var artistid = $("#artist").val();
      $("#display_add_new_song").load("php/add_song_new.php?var1=" + artistid);
});
});

$(document).ready(function(){
      $("#artist").change(function() {
      var artistid = $("#artist").val();
      $("#display_add_new_song").load("php/add_song_new.php?var1=" + artistid);
});
});

$(document).ready(function(){
      $("#artist").keyup(function() {
      var artistid = $("#artist").val();
      $("#display_add_new_song").load("php/add_song_new.php?var1=" + artistid);
});
});

推荐答案

您应将keyup/change的事件绑定移至.load

You should move the event binding of keyup/change into the .load callback function. .load may take a second parameter which is a callback to be executed right after the content has been loaded by it, allowing you to bind events to #artist right after you loaded it.

此外，您可以将准备好文档后要执行的JavaScript合并为一个块，并且可以将要绑定的事件合并到相同的功能，这将删除脚本中的少量重复代码.

Also, you can merge JavaScript to be executed after the document ready into one block, and you can combine events you want to bind to the same functionality, which will remove a little bit of duplicated code in your scripts.

考虑到您的代码，您应该将其更改为以下内容:

Considering your code, you should change it to something like this:

$(document).ready(function(){
    $("#add_new_song").live("click", function() {
        var artistid = $("#artist").val();
        $("#display_add_new_song").load("php/add_song_new.php?var1=" + artistid, function(){
            $("#artist").on("keyup change", function() {
                var artistid = $("#artist").val();
                $("#display_add_new_song").load("php/add_song_new.php?var1=" + artistid);
            });
        });
    });
});

这篇关于jQuery仅在div中已存在时更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！