使用jQuery更改动态创建的div内容

问题描述：

I'm getting pretty frustrated here.

I have a table of records. Next to each record will be a button. On clicking the button next to that record, a jquery AJAX call should be executed.

    <script language="JavaScript" type="text/javascript">
<!--
function swapContent(cv) {
    $("#myDiv").html('<div align="center"><img src="images/loader.gif"/></div>').show();
    var url = "process.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $("#myDiv").html(data).show();
    });
}
//-->
</script>

The associated HTML:

<div id="myDiv" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('do_stuff');"><img src='images/icon.png' border='0'></a></div>

When I click on the HTML link, the contents of the div "myDiv" are changed out for the output of the ajax call to process.php. This is all well and good, but I will have dozens of these divs, and I need to be able to call the swapContent function with not only the parameter cv, but also pass in a parameter for which div should have its contents altered.

I believe my error is just based on an ignorance of JS syntax. For instance, I've done this:

    <script language="JavaScript" type="text/javascript">
<!--
function swapContent(thediv,cv) {
    $(thediv).html('<div align="center"><img src="images/loader.gif"/></div>').show();
    var url = "process.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $(thediv).html(data).show();
    });
}
//-->
</script>

but I'm not sure if that is then treating the variable thediv as a string when it should be an object or what might be the problem.

I would appreciate any help you might give!

<div id="div1" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('div1','do_stuff');"><img src='images/icon.png' border='0'></a></div>
...
<div id="div2" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent('div2','do_stuff');"><img src='images/icon.png' border='0'></a></div>

答

As you are passing the id of the div to the function so, in place of $(thediv) -> $("#"+thediv) will work

答

clear the html of your div as before adding new div the like :

$('#myDiv').html('');

答

You have already done most of the work :) . Now use this object. http://jsbin.com/evirun/2/edit#source ( create one example to show how can you find out the correct calling div element )

<div id="div1" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent(this,'do_stuff');"><img src='images/icon.png' border='0'></a></div>

<div id="div2" align="center"><a href="#" onClick="return false" onmousedown="javascript:swapContent(this,'do_stuff');"><img src='images/icon.png' border='0'></a></div>

Now your script:

<script language="JavaScript" type="text/javascript">
<!--
function swapContent(obj,cv) {
    $(obj).parent().html('<div align="center"><img src="images/loader.gif"/></div>').show();
    var url = "process.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $(obj).parent().html(data).show();
    });
}
//-->
</script>

this will actually pass the DOM element which is calling the method. Then in your script you are using this element.

EDIT

I missed that anchor tag is inside div . Changed the script to use parent.

答

Don't put the onclick and onmousedown handlers inline. I'd suggest you use (html5) data- attributes to store the value that you're currently putting in the cv parameter:

<div id="div1" align="center"><a href="#" data-cv="do_stuff"><img src='images/icon.png' border='0'></a></div>
...
<div id="div2" align="center"><a href="#" data-cv="do_stuff"><img src='images/icon.png' border='0'></a></div>

...and then bind the clicks with jQuery something like this:

$("a[data-cv]").click(function() {
   var thediv = $(this).parent(),
       cv = $(this).attr("data-cv");

   thediv.html('<div align="center"><img src="images/loader.gif"/></div>');

   var url = "process.php";
   $.post(url, {contentVar: cv} ,function(data) {
      thediv.html(data);
   });

   return false;
});

This code uses the has attribute selector to get all anchor elements that have a data-cv attribute and binds a click handler to those elements. Within the handler, this will be the particular anchor clicked, so given in your markup the associated div element is actually the parent of the anchor you can just use $(this).parent() to get a reference to the right div (for other html structures you could use other DOM traversal methods such as .prev(), or .closest(), etc.).

The return false; at the end of the click handler stops the default anchor click behaviour.

Note also that for your code as currently shown you don't need the .show() method since the divs are already showing.

使用jQuery更改动态创建的div内容

相关推荐