Trying to add click event on the prepend element:

问题

Trying to redirect to different page on click of image

 $('.grid').prepend('<div id="new" style="width:50px;background-color:#1879A9;padding-left:3px;margin-top:10px"><a href="#somelink"><img id="test" src="#somesource"></a></div>');

Tried the below code:

$('.grid').on('click', '#test', function() {
      alert("test"); //It didnt work.
});

回答1:

Maybe something like this:

$('.grid').on('click', window.location.href = 'page_url');

回答2:

First you've to use class insted of id , (semantically error when same id for multiple element )

also to redirect to your page when clicking on the image , first prevent default action when click on the grid , so it wont redirect when clicking on link directly .

then get the link of the a parent tag image and perfom redirect programticly using $(this).parent("a").attr("href"); window.location.href

See below snippet :

$('.grid').prepend(
   '<div class="new" style="width:50px;background-color:#1879A9;padding-left:3px;margin-top:10px"><a href="https://stackoverflow.com"><img class="test" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShuHaRYzsoiz_KpVL5Ite65oK_ILy3p1b5vrZ996D1HFKdAS64"></a></div>');
    
$('.grid').on('click', '.test', function(e) {
  e.preventDefault();
  var urlRedirect = $(this).parent("a").attr("href");
  console.log("redirecting to ..."+ urlRedirect);
  // this will redirect after 2 sec
  setTimeout(function(){
    window.location.href = urlRedirect;
  },2000)
  
  
});

.test {
  width:20px;
  height:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid"></div>

回答3:

Edited

I think you just create multiple same ID elements.

Change using ID to class, it should work fine.

Edited

Modified base on asker's comment

$('.grid').each(function(event){
    if($(this).find('.test').length > 0) return false;
    var _html = '<div style="width:50px;background-color:#1879A9;padding-left:3px;margin-top:10px"><a class="link" href="'+$(this).data('url')+'"><img class="test" src="'+$(this).data('image')+'"></a></div>';
    var new_node = $(_html);
    $(this).prepend(new_node);
    new_node.find('.test').click(function(event){
        event.preventDefault();
        alert($(this).attr('src'));
        // redirect here
        // window.location.href = $(this).parent().attr('href');
    })
})

.grid{

width:40px;
height:40px;
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid" data-url="x.x.x" data-image="http://x.x.x"></div>
<br/>
<div class="grid" data-url="y.y.y" data-image="http://y.y.y"></div>
<br/>
<div class="grid" data-url="z.z.z" data-image="http://z.z.z"></div>
<br/>
<div class="grid" data-url="a.a.a" data-image="http://a.a.a"></div>

回答4:

first make your element string to obejct like this and append to target

var el = $('<div id="new" style="width:50px;background-color:#1879A9;padding-left:3px;margin-top:10px"><a href="#somelink"><img id="test" src="#somesource"></a></div>')
$('.grid').append(el)

el.click(function(){ /* do something */ });

it many slow than your method for creating element but u have complexity if want to doing with that element.

来源：https://stackoverflow.com/questions/50793285/trying-to-add-click-event-on-the-prepend-element

标签

javascript

jquery

html

sharepoint