Adding dynamic styles with conditions to the dom elements

Question

I am generating divs dynamically but What I want is to add a anchor tag that shows a trash image for deleting that particular message on hover of a particular div. I have written a :hover on class to add background and that is working fine but I want to add an anchor tag also . Here is my code::

Style

<style>
  .mail:hover {
        background-color: #cde6f7;
        /*background-image: url("/Content/images/Trash.png");*/
    }
.mail {
    float: left;
    width: 100%;
    border-bottom: solid 1px #ccc;
    padding-bottom: 10px;
    margin-top: 3px;
    cursor: pointer;
}
</style>

Here I am creating the dynamic div's and I want to add background color and an trash image image to everydiv I hover

<script>
 success: function (data) {
                if (data.MessageData != null) {
                    var DataDiv = "";
                    for (var iRow = 0; iRow < data.MessageData.length; iRow++) {
                        var RowData = data.MessageData[iRow];
                        var date = new Date(parseInt(RowData.Sent_Date.substr(6)));
                        var style = '';
                        if (RowData.IsReceiver_Received == false) {
                            style = 'color:#0460C7' + '!important ';
                        }
                        DataDiv += "<div class='mail'  id='" + RowData.pkMessageId + "' onclick=ShowMessage('" + RowData.pkMessageId + "')>";
                        DataDiv += "<h3 style=" + style + ">" + RowData.Subject + "</h3>";

                        //<label class='label' style='color:red ! important;'> hi hi hi </label>

                        DataDiv += "<label style=" + style + "class='clsLbl'> From:" + RowData.Message_From + "</label>";
                        DataDiv += "<label style=" + style + "class='clsLb2'>" + date.toDateString() + "</label></div>";
                    }
                    $("#hdnSearchType").val(1);
                    $("#hdnUserType").val(1);
                }
                $("#MessageStore").html('');
                $("#MessageStore").html(DataDiv);

            },
</script>

`I want to add an anchor tag also` then go ahead. What is the problem? — Satpal, Apr 22 '14 at 10:55
[this](http://stackoverflow.com/questions/7972389/jquery-hover-not-working-for-dynamic-element) might help — Satpal, Apr 22 '14 at 11:01

score 1 · Answer 1 · answered Apr 22 '14 at 11:18

1

  $(".mail").live('hover', function(e){
      $("#"+this.id).append("<a>addd</a>");               
  });

answered Apr 22 '14 at 11:18

LeNI

1,184
2
10
19

score 1 · Answer 2 · answered Apr 22 '14 at 12:22

If I understand your question properly, you would need to do this:

While dynamically creating the <div>'s HTML, also add this inside the div:

DataDiv += "<a href='its-url' class='trash'></a>";
This will add an anchor inside your dynamic elements.
Since you want to keep this hidden and it will be only visible when you hover over the "mail" div,
```
.trash { display: none; }
.mail:hover .trash { display: block; }
```
Will work for you.
You can then use background-image or <img src=""> to show the trash icon inside this anchor element.

Adding dynamic styles with conditions to the dom elements

2 Answers2