javascript - How to capture the id of a div on click and pass it to the function to make the code dynamic? -
i have coffeescript based code has definitions (ids , classes) called locally. want refactor based on dynamic view i.e, on click user in site, should send corresponding id function. how deal this?
html -
<div id="dl1"> <div class="dl_div"> <div id="target1" data-key="<%= @aws_url1[:key] if !@aws_url1.nil? %>"> <% if !@aws_url1.nil? %> <img id="user_dl1" src="<%= @aws_url1[:url] %>"> <% end %> </div> <div id="close1" style="display: none;"> <button id="closebtn1" class="closebtn">x</button> </div> <div id="closemsg1" style="display: none; position: relative;"> <button id="deletebtn1" class="deletebtn"> <p class="deletebtnstyle">delete</p> </button> <button id="cancelbtn1" class="cancelbtn"> <p class="cancelbtnstyle">cancel</p> </button> </div> <div class="file_browser1" id="file_browser1"> <label for="file_upload1" class="custom-file_upload z-depth-1"> <i class="material-icons"></i> <p class="button-text"> upload here</p> </label> <form id="user_id1_form" action=""> <input type="hidden" name="user_id1_key" value="<%= @aws_urls[0][:key] %>"/> <input id="file_upload1" type="file" accept="image/*" name="user_id1"/> </form> </div> </div> </div> coffeescript -
if $('#target1 img').length == 1 $('#file_browser1').addclass 'none' $('#close1').addclass 'delete' $('#closebtn1').on 'click', (e) -> $('#closemsg1').addclass 'msg' $('#cancelbtn1').click -> $('#closemsg1').removeclass 'msg' $('#deletebtn1').click -> $('#close1').removeclass 'delete' $('#closemsg1').removeclass 'msg' $('#target1 > img').hide() $('#file_browser1').removeclass 'none' $('#file-upload1').val('') return $('#file_upload1').on 'change', (event) -> files = event.target.files image = files[0] old_key = $("#target1").data("key"); new_key = null $user_id1 = $('#file_upload1')[0].files[0]; console.log image.size reader = new filereader $.ajax({ type: "get", url: "http://localhost:3000/users/get_url/13", success :(data) -> new_key = data[0].key processfile $user_id1,(result)-> console.log data[0].url $user_id1 = datauritoblob(result) reader1 = new filereader() reader1.readasarraybuffer($user_id1) reader1.onload = (e) -> rawdata1 = reader1.result; $.ajax({ url: data[0].url, type: 'put', xhr: -> myxhr = $.ajaxsettings.xhr(); if (myxhr.upload) myxhr.upload.addeventlistener('progress', progresshandlingfunction, false); return myxhr; , success: completehandler, error: errorhandler, data: rawdata1, cache: $.param(false), contenttype: "binary/octet-stream", processdata: $.param(false) }, 'json'); }) completehandler = (data) -> $.ajax({ type: "post", url: "http://localhost:3000/users/user_documents/13", data: { aws_key_new: new_key, aws_key_old: old_key, dl_id: "dl", }, success: -> = $('#target1') console.log a.data("key") console.log new_key a.attr('data-key', new_key); }) success :(data) -> alert "complete" return error :(data) -> alert "failed" return errorhandler = (data) -> console.log data alert "failed" progresshandlingfunction = (data) -> reader.onload = (file) -> img = new image img.src = file.target.result $('#target1').html img $('#file_browser1').addclass 'none' $('#close1').addclass 'delete' $('#closebtn1').on 'click', (e) -> $('#closemsg1').addclass 'msg' $('#cancelbtn1').click -> $('#closemsg1').removeclass 'msg' $('#deletebtn1').click -> $('#close1').removeclass 'delete' $('#closemsg1').removeclass 'msg' $('#target1 > img').hide() $('#file_browser1').removeclass 'none' $('#file-upload1').val('') return return reader.readasdataurl image console.log files return how pass ids coffeescript on click?
if understood question, want adding click events group of elements , able respective values when trigged.
one way adding click event attribute class:
for example (using jquery):
// add click event class .drill_cursor $(".drill_cursor").click(function(){ console.log(this.id); }); // used display console.log var consoleline = "<p class=\"console-line\"></p>"; console = { log: function (text) { $("#console-log").append($(consoleline).html(text)); } };.console-line { font-family: monospace; color: red; margin: 2px; } .drill_cursor { margin: 50px; color: blue; }<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div id="console-log"></div> <div id="id-div-1" class="drill_cursor" >div-1-click-on-me</div> <div id="id-div-2" class="drill_cursor" >div-2-click-on-me</div> <div id="id-div-3" class="drill_cursor" >div-3-click-on-me</div> <div id="id-div-4" class="drill_cursor" >div-4-click-on-me</div> </body>another way delegating event element tag:
you can find more information delegate events here:
for cases, delegate events better way add events dynamically!
i hope helps you! luck!
Comments
Post a Comment