如何通过单击JQuery按钮提取ID数据？

Question

I can pull data from a modal $('#ID').on('shown.bs.modal', function (e) { var somevariable = e.id; }); doing this method, but can't figure out how to do it with a button click.

If that is possible, how can I also inherit the data if this button click opens the modal?

http://www.bootply.com/jCXXE6chXu

$(document).ready(function(){
  $(".file_to_upload").click(function (data) {
  //alert("works");
      var questionID = data.id;
    alert(questionID);
    $('[id*="uploaded_files_"]').modal('show');
    $('[id*="uploaded_files_"]').on('shown.bs.modal', function (e) {
    $("#auditinstanceupload").html("<input id='audit_instance_id' name='audit_instance_id' value='"+questionID+"' type='hidden' style='display:none;'>");
    $("#auditidupload").html("<input id='audit_id' name='audit_id' value='"+questionID+"' type='hidden' style='display:none;'>");
    });
  });
});

<!-- 5 is a php row id for an example -->

 <a title="Upload file" href="#" id="5"
class="btn btn-default file_to_upload" >upload button</a>


<!-- modal pop up for [F] button -->
<div class='modal fade' style='z-index:10000' id='uploaded_files_5' role='dialog'>
  <div class='modal-dialog modal-lg'>
    <div class='modal-content'>
    <div class='modal-header'>
    <button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
    <h4 class='modal-title'>Perform Audit</h4>
  </div>
  <div class='modal-body' id='perform_audit1'>
    <form id='my_form' name='form' action='ajax/file_upload.php' method='POST' enctype='multipart/form-data' style=''>
      <h1>Upload File</h1>
      <div id='main'>
        <strong>File: </strong><input name='myFile' id='myFile' size='27' type='file'>
        <input id='my_button' name='action' value='Upload' onclick='uploadshow()' type='button'>
        <input id='auditinstanceupload' style='display:none;' />
        <input id='auditidupload' style='display:none;' />
        <input id='question_id' name='question_id' value='$row[questionID]' type='hidden'>
      </div>
      <!--<input id='close_file_upload' value='Close' type='button'>-->
    </form>
  </div>
  <div class='modal-footer'>
    <form method = 'POST'>
      <input type='button' id='yes_delete' value='Yes ' name='view_audits_delete' />
      <button type='button' class='btn btn-default' data-dismiss='modal'>No</button>
       </form>  
      </div>
    </div>
  </div>
</div>
<!-- modal pop up for [F] file upload button -->            

Answer 1

shown.bs.modal is basically used to execute a function when bootstrap modal is fully open.

If you want to execute a function on click of a button, then you don't need this method. This is for a different purpose. You can use jQuery click() function for that purpose:

$( "#modalButtonId" ).click(function() {
  alert( "Handler for .click() called." );
  //write other methods here
});

source

Answer 2

try this

$(document).ready(function(){
  $(".file_to_upload").click(function (data) {
    //alert("works");
        //var questionID = data.id;
        var questionID = $(this).attr("id");
        alert(questionID);
    $('[id*="uploaded_files_"]').modal('show');
    $('[id*="uploaded_files_"]').on('shown.bs.modal', function (e) {
      $("#auditinstanceupload").html("<input id='audit_instance_id' name='audit_instance_id' value='"+questionID+"' type='hidden' style='display:none;'>");
      $("#auditidupload").html("<input id='audit_id' name='audit_id' value='"+questionID+"' type='hidden' style='display:none;'>");
    });
  });
});

Answer 3

var questionID = $(this)[0].id

This worked for me!