javascript - 从 ajax 和 php 数据构建包含在 JS 或 jQuery 中的 divs JS 函数

Question

如果用户选中表单复选框，我想创建一个新的 div。动态数据从 ajax 和 php 加载。我在问如何用 JS 或 jQuery 创建它。简化版本看起来像

<div id="ajaxSRC1" class="CLASS">
   <a href="javascript:void(0)" onmouseover="return myFunction('ajaxSRC5', 'ajaxSRC6')">
      <img src="ajaxSRC2" width="ajaxSRC3" height="ajaxSRC4" alt="..." />
   </a>
</div>

Answer 1

试试这个：

在复选框单击处理程序中：

$.ajax({
    type : 'post',
    url : 'test.php?id=52454',
    dataType : 'json',
    success : function (obj) {

        //construct and create the element
        var content = $('<div id="' + obj.ajaxSRC1 + '" class="CLASS">'
                    + '<a href="#">'
                    + '<img src="'+obj.ajaxSRC2+'" width="'+obj.ajaxSRC3+'" height="'+obj.ajaxSRC4+'" alt="..." />'
                    + '</a></div>');

        // bind mouseover event to the anchor tag
        content.find('a').mouseover(function() {
            myFunction(obj.ajaxSRC5, obj.ajaxSRC6);
            return false; // alternative to href="javascript:void(0)"
        });

        // append the newly created div to DOM
        divContainer.append(content);

    }
});

Answer 2

首先，不要使用内联JS，使用外部脚本文件
其次，可以像这样用jquery创建div

$('<div id="dataContainer" />');

只需将其添加到事件中，例如：

$('#checkbox').click(function(){
  $('<div id="dataContainer" />').html(ajaxSRC5);
});