JQuery Click處理程序

我創建了一堆div s，並使用簡單函數通過引用的js文件插入縮略圖圖像。基本上我試圖分配循環中的每個新的div點擊處理程序，但可能語法的原因，它不工作。JQuery Click處理程序

這是我的代碼（更新）...

function makethumbs() { 

    for (var i = 0; i < 14; i++) { 

     var backgroundUrl = script_vars + "/images/gallery/thumbs/g" + (i+1) + ".jpg", 
      newdiv = $('<div />', {id: 'thumbnail'+i, width: 145, height: 84}); 
      newdiv.css({display:'inline', 
         float:'left', 
         margin:'2px 2px 0 0', 
         color:'#000', 
         fontSize:'18px', 
         zIndex:0, 
         html:'P', 
         background: 'url(' + backgroundUrl + ')' 
         }); 
      newdiv.click(function() { 
       $(this).stop(true, true).fadeTo('slow', 0); 
      }); 

     $('#thumbholder').append(newdiv); 
    } 

    $('#arrowright').click(function() { 
     var L = $('#thumbholder'), 
      margL = parseInt(L.css('marginLeft'), 10), 
      newMarg = (margL - 147) + 'px', 
      anim = {opacity: 1}; 
      anim["marginLeft"] = newMarg; 
     $('#thumbholder').stop(true, true).animate(anim, 400); 

    }); 
}

即使世界一個額外的點擊處理程序有太多的#arrowright工作正常。不確定它是否是一個可點擊的箭頭div的z排序事物是否在容器中，該容器覆蓋了縮略圖div，如果有意義的話。

來源

2012-12-10 user1890408

- 意外發布。 – user1890408

關於上述的任何想法？它基本上沒有做任何事沒有錯誤沒有動畫點擊沒有.. – user1890408

爲什麼不繼續使用jQuery？

function makethumbs() { 
    for (var i = 0; i < 14; i++) { 

     var backgroundUrl = script_vars + "/images/gallery/thumbs/g" + (i+1) + ".jpg", 
      newdiv = $('<div />', {id: 'thumbnail'+i, width: 145, height: 84}); 
      newdiv.css({display:'inline', 
         float:'left', 
         margin:'2px 2px 0 0', 
         color:'#000', 
         fontSize:'18px', 
         zIndex:0, 
         html:'P', 
         background: 'url(' + backgroundUrl + ')' 
         }); 
      newdiv.click(function() { 
       $(this).stop(true, true).fadeTo('slow', 0); 
      }); 

     $('#thumbholder').append(newdiv); 
    } 

    $('#arrowright').click(function() { 
     var L = $('#thumbholder'), 
      margL = parseInt(L.css('marginLeft'), 10), 
      newMarg = (margL - 147) + 'px', 
      anim = {opacity: 1}; 
      anim["marginLeft"] = newMarg; 
     $('#thumbholder').stop(true, true).animate(anim, 400); 

    }); 
}

因爲您的主要問題是嘗試將jQuery語法的Click處理程序附加到本機JS DOM元素。

來源

2012-12-10 01:21:01 adeneo

感謝您格式化我的代碼:)而對於答案，我想我會嘗試兩種方式，因爲在其他答案的JavaScript版本似乎更直接 - 即addEventListener 。那麼發現我不知道js和jquery之間的區別：/ – user1890408

這是拋出HTMLDivElement沒有方法'on'：/ – user1890408

更新了原始問題，代碼仍然卡住。 – user1890408

將newDiv.click更改爲$(newDiv).click因爲您似乎正在使用jQuery;然而，如果你想繼續使用原生JavaScript，你可以設置一個事件，如下所示：

newDiv.addEventListener('click',function(){ 
//you code here 
});

來源

2012-12-10 01:28:08 Darwayne

謝謝，看起來很有前途！ – user1890408

更新的原始問題，代碼仍然卡住。 – user1890408

JQuery Click處理程序

回答

相關問題