为什么这段jQuery代码不能工作？

时间：2011-06-28 作者：turbonerd

把我的头发扯下来一点！我正在尝试创建多个图像选择框，以便用户可以将任意多个图像上传到他们创建的物种档案中。

我在中使用以下代码。js文件：

jQuery（文档）。就绪（函数（）{

    var i = 2;

    jQuery(\'a#add_media\').click(function() {
        input_code = \'<p>\' +
            \'<input id="upload_image-\' + i + \'" type="text" size="36" name="upload_image" value="" />\' +
            \'<input id="upload_image_button-\' + i + \'" type="button" value="Upload Image" />\' +
            \'</p>\';
        jQuery(input_code).appendTo(\'#upload_wrapper\');
        i++;
    });

    jQuery(\'[id^="upload_image_button"]\').click(function() {
        str = jQuery(this).attr(\'id\');
        substring = str.substring(str.length, str.length - 1);
        id_to_pass = \'upload_image-\' + substring;
        alert(id_to_pass);
        tb_show(\'\', \'media-upload.php?type=image&amp;TB_iframe=true\');
        return false;
    });

    window.send_to_editor = function(html) {
        imgurl = jQuery(\'img\',html).attr(\'src\');
        jQuery(\'#\' + id_to_pass).val(imgurl);
        tb_remove();
    }

});
如果然后使用Firebug查看DOM，我可以看到输入框正确显示：

<div id="upload_wrapper" style="margin:0; padding:0;">
<label>Attach Image</label>
<p>
<input id="upload_image-1" type="text" value="" name="upload_image" size="36">
<input id="upload_image_button-1" type="button" value="Upload Image">
<span>
</p>
<p>
<input id="upload_image-2" type="text" value="" name="upload_image" size="36">
<input id="upload_image_button-2" type="button" value="Upload Image">
</p>
<p>
<input id="upload_image-3" type="text" value="" name="upload_image" size="36">
<input id="upload_image_button-3" type="button" value="Upload Image">
</p>
然而，只有第一个按钮才能打开上传框架？

提前谢谢。

2 个回复
最合适的回答,由SO网友:turbonerd 整理而成

好的，我已经做了奥托建议的更改，效果很好-谢谢。

var uploadClickHandler = function() {
    str = jQuery(this).attr(\'id\');
    substring = str.substring(str.length, str.length - 1);
    id_to_pass = \'upload_image-\' + substring;
    tb_show(\'\', \'media-upload.php?type=image&amp;TB_iframe=true\');
    return false;
};

jQuery(document).ready(function() {

    // Find the number of elements using our unique button name
    var i = jQuery(\'[id^="upload_image_button"]\').size() + 1;

    jQuery(\'a#add_media\').click(function() {
        // Variable to store the HTML for adding a new image
        input_code = \'<p>\' +
            \'<input id="upload_image-\' + i + \'" name="upload_image[\' + i + \']" type="text" size="36" name="upload_image" value="" />\' +
            \'<input id="upload_image_button-\' + i + \'" type="button" value="Upload Image" />\' +
            \'</p>\';

        // Upon being clicked, append the input_code variable to our #upload_wrapper DIV
        jQuery(input_code).appendTo(\'#upload_wrapper\');

        // Use our uploadClickHandler function to add the iFrame functionality to our "on-the-fly" text boxes
        jQuery(\'[id="upload_image_button-\' + i + \'"]\').click(uploadClickHandler);
            i++;
    });

    // Add click functionality to the pre-JS-created HTML text boxes on our main page
    jQuery(\'[id^="upload_image_button"]\').click(uploadClickHandler);

    // iFrame and return value functionality
    window.send_to_editor = function(html) {
        imgurl = jQuery(\'img\',html).attr(\'src\');
        jQuery(\'#\' + id_to_pass).val(imgurl);
        tb_remove();
    }

});

SO网友:Otto

jQuery(\'a#add_media\').click(function() {
    input_code = \'<p>\' +
        \'<input id="upload_image-\' + i + \'" type="text" size="36" name="upload_image" value="" />\' +
        \'<input id="upload_image_button-\' + i + \'" type="button" value="Upload Image" />\' +
        \'</p>\';
    jQuery(input_code).appendTo(\'#upload_wrapper\');
    i++;
});

jQuery(\'[id^="upload_image_button"]\').click(function() {
    ...
});
好吧，这是你的基本问题。

代码的第一位向add\\u media链接上的click处理程序添加了一个函数，这将向页面添加另一位输入HTML代码。

代码的第二位向以upload\\u image\\u按钮ID开头的任何内容的click处理程序添加了一个函数。

问题是您误解了javascript在DOM中的工作方式。

在运行上述代码时，只发生了两件事：a）a#add\\u media按钮正在修改其单击处理程序，b）DOM中以upload\\u image\\u按钮开头的任何元素正在修改其单击处理程序。

但是，稍后添加的输入还不在DOM中。它们不作为页面上的元素存在。。。然而因此，当您稍后将它们添加到页面时，它们没有经过修改的单击处理程序。

jQuery（）。click（）是对DOM的直接修改。它正在修改指定的元素，但不具有追溯力。稍后向页面添加内容并不会使时间神奇地颠倒，也不会将功能添加到添加到页面的新元素中。

要修复它，您需要修改代码，使其在将新创建的元素附加到upload\\u包装器之后，也将单击处理程序添加到新创建的元素中。

此外，您的输入都有相同的name=“upload\\u image”位，如果您稍后试图保存生成的信息，这将不起作用。由于PHP数组处理，name=“upload\\u image[]”仍能正常工作。

结束
标签： custom-post-types   jquery   uploads   小码农  

相关推荐

在Uploads-wp_mkdir_p()或WP_Filessystem中创建目录？

我认为我以前没有在WP中创建文件夹/文件的实际需要，但对于插件，我需要缓存（用于调整大小的图像）文件夹wp-content/uploads.这就提出了一个问题——我真的需要用Filesystem API （包括在需要时杂乱无章地要求FTP凭据），或wp_mkdir_p() 够了吗？